利用css实现单行文本文字两端对齐

日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果。

但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效。

所以需要采用下面两种方法实现单行文本两端对齐效果:

利用伪类 :after 实现:给元素添加伪类 :after 设置成行内块元素,宽度设置为100%。

div:after{
    content: "";
    display: inline-block;
    width: 100%;
}

在元素标签内加一个空标签: <span></span> 或者 <i></i> 等都可以。设置为行内块, padding-left 或者宽度 width 设置为 100%。我这里用的是 <i> ,比如 <img> ,直接只给个宽度100%就可以。

p i{
    display: inline-block;
    /*padding-left: 100%;*/
    width: 100%;
}

还有一个问题是IE不支持,需要再加一个属性text-justify:inter-ideograph; (用表意文本来排齐内容)

注:text-justify 只支持IE浏览器,有以下几个属性:

auto 浏览器决定齐行算法。

none 禁用齐行。

inter-word 增加/减少单词间的间隔。

inter-ideograph 用表意文本来排齐内容。

inter-cluster 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。

distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。

kashida 通过拉伸字符来排齐内容。

代码如下:

HTML:

<p>
    我是谁? <i></i>
</p>
<div>
    我不知道
</div>

CSS:

div,p{
    text-align: justify;/*两端对齐*/
    border: 1px solid red;
    text-justify:inter-ideograph;/*IE支持*/
}
div:after{
    content: "";
    display: inline-block;
    width: 100%;
}
p i{
    display: inline-block;
    /*padding-left: 100%;*/
    width: 100%;
}

不过,谷歌内核和IE内核还是有所区别的。如下图:

利用css实现单行文本文字两端对齐 HTML笔记 第1张

细心的人会发现,下面会多出一行空白,如果我们确定就是单行文本,可以通过固定元素的高度来实现去掉空白。

div,p{
    height: 36px;
    line-height: 36px;
}

这样就可以了:

利用css实现单行文本文字两端对齐 HTML笔记 第2张

未经允许不得转载:前端资源网 - w3h5 » 利用css实现单行文本文字两端对齐

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)