Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

关于换行的几个知识点：

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

一、强制英文自动换行：

举例：&lt;p&gt;中文</p> <p>English</p>
<p>标签宽度200Px。没限高度。那么下面英文就出现破行显示，中文并没有这个问题。只要在P标签加上下面CSS样式即可

p{
    word-wrap:break-word; 
    word-break:break-all; 
}

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

上面中文换行，是不是第三个【我是中文】分成上下分离。如果在做关键词展示时，需要按个关键词换行改成下面Css样式即可（注意：如果你的一个关键词都超过了<P>的宽度，那么，还是会自动换行）
下面英文也换行，是因为中间有个空格。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 属性

CSS word–break 属性

CSS white-space 属性

CSS overflow 属性

CSS text–overflow 属性

代码007普通

打赏 收藏 海报 链接