首页 前端知识 Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

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

2024-08-27 09:08:42 前端知识 前端哥 855 347 我要收藏

关于换行的几个知识点:

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


一、强制英文自动换行:

举例:<p>中文</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 属性

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

CSS word-break 属性

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

CSS white-space 属性

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

CSS overflow 属性

描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

CSS text-overflow 属性

描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16944.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!