css 如何控制文字换行、省略

css 如何控制文字换行、省略

1. white-space 文字换行

属性值如下：

值描述

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

2. word-break 单词换行

属性值如下：

值描述

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

<style> .root{ width: 200px; height: 200px; border: 1px solid red; word-break: break-all; } </style> <div class="root"> veryhappyveryhappyveryhappyveryhappyveryhappyveryhappyveryhappy </div>

3. word-wrap 字母换行

属性值如下：

值描述

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

<style> .root{ width: 200px; height: 200px; border: 1px solid red; word-wrap: break-word; } </style> <div class="root"> hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh </div>

4. text-overflow 文本超出显示省略号

属性值如下：

值描述

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

<style> .root { width: 200px; height: 100px; border: 1px solid red; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; /* 或者 word-break: break-all; */ } </style> <div class="root"> veryhappyveryhappyveryhappyveryhappyveryhappyvery </div>

好了，分享到此结束！小伙伴快去试试吧~ 参考：菜鸟教程