CSS-中英⽂两端对齐，英⽂不断词，⾃动换⾏
CSS：
{
word-break: keep-all;
word-wrap: break-word;// 只对英⽂起作⽤，以单词作为换⾏依据。
white-space: pre-wrap;//只对中⽂起作⽤，强制换⾏。
text-align:justify;//css英⽂语句的两端对齐：
text-justify:inter-ideograph;
}
禁⽌换⾏：
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要⽤于IE等浏览器，Opera浏览器⽤-o-text-
white-space:nowrap;
}
单⾏⽂字如果超出2⾏⽤省略号表⽰：
.text{
width:220px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
word-break 属性规定⾃动换⾏的处理⽅法。
normal 使⽤浏览器默认的换⾏规则。
break-all 允许在单词内换⾏。
keep-all 只能在半⾓空格或连字符处换⾏。
word-break 当⾏尾放不下⼀个单词时，决定单词内部该怎么摆放。
break-all: 强⾏上，挤不下的话剩下的就换下⼀⾏显⽰呗。
keep-all: 放不下了，那就另起⼀⾏展⽰，再放不下，也不退缩。
word-wrap 当⾏尾放不下时，决定单词内是否允许换⾏
normal: 单词太长，换⾏显⽰，再超过⼀⾏就溢出显⽰。
break-word: 当单词太长时，先尝试换⾏，换⾏后还是太长，单词内还可以换⾏。
white-space: normal | nowrap | pre | pre-wrap | pre-line
text align centerpre: 保留所有的空格和回车，且不允许折⾏。
pre-wrap: 保留所有的空格和回车，但是允许折⾏。
pre-line: 会合并空格，且允许折⾏
text-align:justify 是专门为英⽂设计的，⽤来实现英⽂语句的两端对齐
text-justify :
auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
auto :
默认值。允许浏览器代理⽤户确定使⽤的两端对齐法则。
distribute :
处理空格很像newspaper ，适⽤于东亚⽂档。尤其是泰⽂。
distribute-all-lines :
两端对齐⾏的⽅式与distribute 相同，也同样不包含两段对齐段落的最后⼀⾏。适⽤于表意字⽂档
distribute-center-last :
未实现。
inter-cluster :
调整⽂本⽆词间空格的⾏。这种模式的调整是⽤于优化亚洲语⾔⽂档的。
inter-ideograph :
为表意字⽂本提供完全两端对齐。他增加或减少表意字和词间的空格
inter-word :
通过增加字之间的空格对齐⽂本。该⾏为是对齐所有⽂本⾏最快的⽅法。它的两端对齐⾏为对段落的最后⼀⾏⽆效
kashida :
通过拉长选定点的字符调整⽂本。这种调整模式是特别为阿拉伯脚本语⾔提供的。需要IE5.5+⽀持
newspaper :
通过增加或减少字或字母之间的空格对齐⽂本。是⽤于拉丁⽂字母表两端对齐的最精确格式
说明：设置或检索对象内调整⽂本使⽤的对齐⽅式。因为这个属性影响⽂本布局，所以text-align 属性必须被设置为justify 。此属性只作⽤于块对象。此属性对于currentStyle 对象⽽⾔是只读的。对于其他对象⽽⾔是可读写的。对应的脚本特性为textJustify 。
以上⽅法对chrome（360也是chrome内核）⽆效，还需再加上下⾯代码：
word-break:break-all

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。