css显示文字时怎么加空格,css的text-align-last属性,以及IE下text。。。
css显⽰⽂字时怎么加空格,css的text-align-last属性,以及IE下
text。。。
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没有效果的时候,⼀定要注意在⽂字字符间添加空格。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。