作者:亚艾元技术部
我们在Drupal8项目中,遇到一个段落P标签对齐的问题。最新的浏览器下面,都没有问题,但是360浏览器,选择了兼容模式,问题就出来了,客户使用360浏览器的还是比较多,让我们一定解决这个问题。总是对不齐。尝试了很久,我们的工程师都没有解决,后来我们向CSS专家shixinwzw求助,给出了一个兼容性较强的CSS实现。
p { text-align: justify; text-justify: inter-ideograph; }
tex-justify 属性只在IE下生效,而360浏览器的兼容模式就是使用IE的内核。
text-justify: inte-idograph; 模拟时出现问题——两端对齐时最后一行也会分散对齐
text-justify: distribute; 两端对齐最后一行不分散
下面是关于这个属性的解释:
text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;
值 | 描述 |
---|---|
auto | 浏览器决定齐行算法。 |
none | 禁用齐行。 |
inter-word | 增加/减少单词间的间隔。 |
inter-ideograph | 用表意文本来排齐内容。 |
inter-cluster | 只对不包含内部单词间隔的内容(比如亚洲语系)进行排齐。 |
distribute | 类似报纸版面,除了在东亚语系中最后一行是不齐行的。 |
kashida | 通过拉伸字符来排齐内容。 |