css样式如何实现段落文字两端对齐的示例

来源：懂视网责编：小采时间：2020-11-27 18:50:33

css样式如何实现段落文字两端对齐的示例

css样式如何实现段落文字两端对齐的示例:有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐，只需要设置两个css样式即可。.demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ }tex

推荐度：

点击下载本文 文档为doc格式

导读css样式如何实现段落文字两端对齐的示例:有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐，只需要设置两个css样式即可。.demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ }tex

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐。其实实现段落的两端对齐，只需要设置两个css

样式即可。

.demo{
 text-align: justify;
 text-justify: inter-ideograph;/*IE*/
}

text-justify基本语法

语法：

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

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

代码如下：

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>css实现段落文字两端对齐</title>
 <style>
 *{margin:0;padding:0;}
 .demo{
 width: 300px;
 height: 200px;
 margin: 20px auto;
 font-size: 14px;
 color: #0a78fa;
 text-align:justify;
 text-justify:inter-ideograph;/*IE*/
 border: 1px solid #fa5275;
 }
 </style></head><body><p class="demo">
 川剧流行于四川全境和云南贵州等省部分地区，是融汇高腔、昆曲、胡琴(即皮黄)、弹戏(即梆子)和四川民间灯戏五种声腔艺术而成的剧种。
 川剧，是中国汉族戏曲剧种之一，流行于四川东中部、重庆及贵州、云南部分地区。川剧脸谱，是川剧表演艺术中重要的组成部分，
 是历代川剧艺人共同创造并传承下来的艺术瑰宝。川剧由昆曲、高腔、胡琴、弹戏、灯调五种声腔组成。</p></body></html>

效果如下：

css样式如何实现段落文字两端对齐的示例

推荐度：

点击下载本文 文档为doc格式

标签：文字如何 css

热门焦点

css样式如何实现段落文字两端对齐的示例

css样式如何实现段落文字两端对齐的示例

css样式如何实现段落文字两端对齐的示例

最新推荐

猜你喜欢

热门推荐