关于换行的几个知识点：

1、Css强制英文或数字自动换行 2、让中文按关键词或标签换行 3、Css强制中文不自动换行 4、Css强制中文不自动换行并自动隐藏； 5、Css中英文或数字的超出部分自动省略号…； 6、Css中word-wrap、word-break、white-space、overflow、text-overflow的用法讲解；

一、强制英文自动换行：

举例：

中文

English

标签宽度200Px。没限高度。那么下面英文就出现破行显示，中文并没有这个问题。只要在P标签加上下面CSS样式即可

p{

word-wrap:break-word;

word-break:break-all;

}

二、让中文按关键词或标签换行：

上面中文换行，是不是第三个【我是中文】分成上下分离。如果在做关键词展示时，需要按个关键词换行改成下面Css样式即可（注意：如果你的一个关键词都超过了

的宽度，那么，还是会自动换行） 下面英文也换行，是因为中间有个空格。keep-all的换行逻辑是以关键词或词组来判定是否换行，break-all的换行逻辑是按单个字或字母来换行

p{

word-wrap:break-word; 

word-break:keep-all; 

}

三、强制中文不自动换行：

上面看到了中文会自动换行，现在我们不需要中文自动换行，使用下面代码

p{

white-space:nowrap;

}

四、强制中文不自动换行并隐藏：

代码如下

p{

white-space:nowrap;

overflow:hidden;

}

五、中英文或数字的超出部分自动省略号…

代码如下

p{

white-space:nowrap;

overflow:hidden;

text-overflow :ellipsis;

}

六、样式word-wrap、word-break、white-space、overflow、text-overflow解说

CSS word-wrap 属性

值描述normal只在允许的断字点换行（浏览器保持默认处理）。break-word在长单词或 URL 地址内部进行换行。

CSS word-break 属性

值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。

CSS white-space 属性

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 

 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。 
CSS overflow 属性 
值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。 
CSS text-overflow 属性 
值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。 
好文阅读
评论可见，请评论后查看内容，谢谢！！！
  您阅读本篇文章共花了：