在中文页面段落中,我们常常遇到不仅包含纯中文字符内容,而且还“掺杂”英文字符或阿拉伯数字字符的情况。这样的情况下,我们需要实现满行字符两端对齐,内容均匀分布,以提升页面的美观度。
满行字符两端对齐意味着行内的左边第一个字符贴紧元素 content 左边缘,右边的第一个字符就贴近元素 content 的右边缘。内容均匀分布则是在元素 content 内,一个中文字符会被当做一个字符;而一个串数字,一个英文单词,一个非中文字符标点符号,或者是前三者混搭的字符串,都将视为一个字符,以此为基础进行均匀分布。
传统的解决方法是使用 CSS 的 text-justify 和 text-align 属性来实现:
CSS
text-justify: inter-ideograph;
text-align: justify;然而,这种方法在一些浏览器(如 Firefox)中可能无法正常工作,且可能无法处理一些特殊情况,比如当一行中只有一个或两个词时,这些词可能会被过度拉伸以填满整行。