css显示文字时怎么加空格,css的text-align-last属性,以及IE下text-align-last的文字间要加空格...

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:0 6px;

margin-left:-100%;

text-align-last:justify;

}

然后效果就变成下面这样了：

虽然，乍一看，像是达到效果了，但是细看，发现第一行的“客户姓名”好像没有达到两端对齐的效果。这里的具体原因不清楚，但是在chrome浏览器下需要添加text-align:justify，才能让第一行两端对齐。我猜测是因为第一行的“客户姓名”其实是已经换行了，它已经不算是最后一行了，但是由于换行的是一个空白字符，所以没有增加高度，看起来还是一行内容。所以我们需要做一下修改：.t_name{

width:80px;

box-sizing:border-box;

padding:0 6px;

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没有效果的时候，一定要注意在文字字符间添加空格。