Nov 01, 2012 – 学习 & 提升 – 网页设计  HTML  CSS   – Bai

HTML/CSS 两端对齐

文本两端对齐

可使用以下代码使文本两端对齐:

text-align: justify;
text-justify: inter-ideograph;

使用这两行 CSS 代码可以使文本中的英文文本实现完美两端对齐,但是对于中文文本有条件性限制:中文中所使用的标点必须全部为英文标点(也即半角符号标点),或者可以使用全角符号标点,但是在中文文本中的英文字符必须使用全角字符。

比如说,以下这段文本使用了中文全角标点符号,而其中的英文也为正常状态下的半角字符,则使用以上代码后没能实现两端对齐,效果如下:

大家好,我叫Baige5117,来自中国。我很喜欢篮球(Basketball),非常喜欢看NBA(美国男子篮球职业联赛)。喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等。我也经常打篮球,技术一流,希望能提高,哈哈。大家好,我叫Baige5117,来自中国。我很喜欢篮球(Basketball),非常喜欢看NBA(美国男子篮球职业联赛)。喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等。我也经常打篮球,技术一流,希望能提高,哈哈。

而以下的文本使用了半角标点符号,从而实现了两端对齐:

大家好, 我叫Baige5117, 来自中国. 我很喜欢篮球(Basketball), 非常喜欢看NBA(美国男子篮球职业联赛). 喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等. 我也经常打篮球, 技术一流, 希望能提高, 哈哈. 大家好, 我叫Baige5117, 来自中国. 我很喜欢篮球(Basketball), 非常喜欢看NBA(美国男子篮球职业联赛). 喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等. 我也经常打篮球, 技术一流, 希望能提高, 哈哈.

以下的文本使用了全角英文符号和全角的标点符号,也能实现两端对齐,但是使用全角的英文字符明显不太现实(太难看了):

大家好,我叫Baige5117,来自中国。我很喜欢篮球(Basketball),非常喜欢看NBA(美国男子篮球职业联赛)。喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等。我也经常打篮球,技术一流,希望能提高,哈哈。大家好,我叫Baige5117,来自中国。我很喜欢篮球(Basketball),非常喜欢看NBA(美国男子篮球职业联赛)。喜欢的球星有迈克乔丹(Michael Jordan),科比(Kobe Bryant),麦迪(Tracy McGrady)等。我也经常打篮球,技术一流,希望能提高,哈哈。

综上所述,中文文本使用英文字符显然不合适,而英文字符使用全角字符也明显不现实,故要想真正实现中英文混合文本的两端对齐还无法完美实现。所以,暂且还是不使用两端对齐了。

上一篇:

下一篇:

回顶部