如何实现固定标签长度和分散文字的效果
时间:2023-03-31 00:03:26
CSS
我们经常看到填写表格时,即使字数不同,前面的标签也是左右对齐的。就像下面这个效果:解析这个效果主要是通过text-align-last属性来实现的。text-align-last:指定如何对齐文本的最后一行。菜鸟教程对此属性有这样的描述:text-align-last属性仅在text-align属性设置为“justify”时有效。但我试过了。当文本只有一行时,不设置text-align属性,text-align-last也很有用。当然这只是针对非IE和Safiri。text-align属性对多行文本中的最后一行文本没有影响。/*css*/.label{宽度:200px;text-align-last:对齐;}/*html*/product
,forIEbrowserandsafaribrowser该设备不再工作。因为text-align-last不支持这两种浏览器。对于这个问题,我们可以使用伪类来解决。/*css*/.label{宽度:200px;高度:30px;/*需要加上高度,否则文字下方会有一些空隙*/text-align:justify;}.label:after{内容:'';显示:内联块;宽度:100%;}/*html*/
Product 需要注意三点:添加伪类后,相当于在label的文本后添加一行,所以text-align-last不行,需要加text-align,因为加了伪类后,文本后面会多出一行,即使伪类的高度设置为0。所以一个高度必须被添加到.label属性。区别如下:添加伪类后,标签的文字之间必须有一个空格(一个就够了,不要太多),否则没有效果。两种解决方案的比较第二种方法比第一种方法更兼容。我在多个浏览器中测试过,没有问题。第一种方案比较简洁,但是不支持ie和safari,所以建议大家安心使用第二种方案。