text-align-last属性
text-align-last用来定义block元素或者多行文本因为容器宽度自动断行,形成多行文本时的最后一行文本的对齐模式,这里你可能会说,我们有text-align不就搞定了。确实,大部分情况下的text-align就可以达到我们对文本的对齐要求,但是在text-align:justify定义文本两端对齐的时候,这个两端对齐对最后一行是不管作用的。当然你也可以采用text-algin文中处理最后一行的两端对齐的方式。但是使用text-align-last来处理最后一行的两端对齐无疑更加简单。
说了这么多,你可能对text-align-last还是提不起兴趣来,那么我们来看一个他的实际应用,或许能提高你对text-align-last的兴趣:
比方我们有一个这样的form表单输入,对于名称这块,我们想要让他实现两端对齐的效果,那么你就可以这名称属性的样式上加一句text-align-last:justify来达到这一效果:.t_name{
width:80px;
box-sizing:border-box;
padding:06px;
margin-left:-100%;
text-align-last:justify;
}
然后效果就变成下面这样了:
虽然,乍一看,像是达到效果了,但是细看,发现第一行的“客户姓名”好像没有达到两端对齐的效果。这里的具体原因不清楚,但是在chrome浏览器下需要添加text-align:justify,才能让第一行两端对齐。我猜测是因为第一行的“客户姓名”其实是已经换行了,它已经不算是最后一行了,但是由于换行的是一个空白字符,所以没有增加高度,看起来还是一行内容。所以我们需要做一下修改:.t_name{
width:80px;
box-sizing:border-box;
padding:06px;
margin-left:-100%;
text-align:justify;
text-align-last:justify;
}
然后效果就更加精细的两端对齐了
最后再说一下,text-align-last:justify这个样式的兼容性不是很好,但是在桌面浏览器上,IE,chrome,firfox目前是都支持的,仍然有可使用的空间。
但是在IE下使用的话,有一个注意点,那么就每一个文字字符之间要有空格,才能实现text-align-last:justify两端对齐的效果。
这一段代码的名称“客户姓名”,“邮箱”的text-align-last的样式是没有效果的:
要想在IE下有效果,需要写成“客 户 姓 名”,"邮 箱"这种形式,才能有两端对齐的效果。
我是在IE8下测试的, 不知道在高版本的IE下是否对这个属性有改变。所以,一定要记住,如果你在IE下使用text-align-last没有效果的时候,一定要注意在文字字符间添加空格。