css实现强制不换行溢出显示点点点（...）多行溢出显示(...)

本文链接：https://blog.csdn.net/dwp_wz/article/details/113312381

本文介绍了CSS中关于文本自动换行、强制换行和不换行的实现方式，以及如何利用`word-wrap`、`word-break`、`white-space`和`text-overflow`属性进行文本溢出的控制。特别讨论了多行文本溢出显示省略号的技巧，适用于WebKit浏览器和移动端。同时，提到了在IE浏览器中实现多行省略的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

1.自动换行：
word-wrap:break-word;
word-break:normal;
2.强制换行：
word-break:break-all; 按字符截断换行 /* 支持IE和chrome，FF不支持*/
word-wrap:break-word; 按英文单词整体截断换行 /* 以上三个浏览器均支持 */
* 注意：单词换行需要父盒子为块级元素
3.强制不换行：
white-space:nowrap;

属性规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;

常用场景

width:100px;/*要显示文字的宽度*/
text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
white-space :nowrap; /*让文字不换行*/
overflow : hidden; /*超出要隐藏*/

overflow : hidden; /*超出要隐藏*/

$C:\Users\admin\AppData\Roaming\Typora\typora-user-images$

多行文本溢出显示(…)

div {
	  width: 300px;
      height: 40px;
      /* white-space: nowrap; */
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
}

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注意

ie核心的浏览器一定要定义line-height与高度，-webkit-line-clamp意思就是几行，例如
line-height: 20px;
max-height: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;