CSS代码实现网页文本两端对齐

按照中国人现代的阅读习惯,阅读一篇文章都会从左往右顺序阅读,这样我们日常编写css代码时,实现文本左对齐通过text—align:left或float:left应该很容易就能实现文本做对齐的效果。但是,当我们实现左对齐后,我们会发现其实我们的网页呈现的文本展现效果并不完美,由于标点符号、阿拉伯数字和汉字混排在一起,容易造成文本段落右边行与行之间存在参差不齐的情况,很影响美观。
为了解决这个问题,请教了很多朋友,也搜索了很多网络教程,由于缺少css的系统学习,导致css代码编写的缺陷。功夫不负有心人,最终找到了解决方案,现将《CSS代码实现文本右边对齐》相关教程分享给大家。

 

IE浏览器下我们用text-justify解决问题
text-justify语法

text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph

text-justify参数

auto:允许浏览器用户代理确定使用的两端对齐法则
inter-word:通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
newspaper :通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
distribute:处理空格很像newspaper,适用于东亚文档。尤其是泰国
distribute-all-lines:两端对齐行的方式与distribute相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档
inter-ideograph:为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

 

Firefox浏览器下我们用text-align:justify;

有left:左对齐;right:右对齐;center:居中;justify:两端对齐。前面三个是我们用习惯了的,而讲到右侧、右边、右面文本对齐的话就要用到justify参数。

 

因此我们要把text-align:justify;text-justify:inter-ideograph;放在一起来兼容更多的浏览器。

综上所述,将 text-align:justify;text-justify:inter-ideograph; 复制粘贴到你的层容器里,即可实现在文本左对齐的同时,通过简单css代码实现文本右对齐,而且不影响段落最后一行的左对齐效果,是不是很赞?这样的效果应该是word这种专业的文字排版软件(只能实现左对齐、右对齐、两端对齐)也望尘莫及的。

 

修改后的效果如下:

css实现文本右对齐

是不是很赞?是不是激动了?赶紧行动吧!

友情提醒:经测试,以上方法不兼容Chrome浏览器,而且到目前为止,也没有更好的办法在chrome浏览器下实现此效果。

《CSS代码实现网页文本两端对齐》有2个想法

发表评论