溢出盒子的文字显示省略号 html+css

问题：

在我们定义一个div或其它盒子时，往里面写文本，往往文字太多会溢出，如下所示：

红色部分是我定义的一个有长宽的div盒子，但是显然还是太小，多余的文本溢出了。

解决：

1.单行文本溢出显示“…”：

  .yc{
           width: 500px;
           height: 100px;
           background-color: rgb(226, 187, 187);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
     }

注意 ：
white-space: nowrap;表示强制文本一行显示；
overflow: hidden; 表示超出部分隐藏；
text-overflow: ellipsis; 表示多的文本省略号显示；

效果：

2.多行文本溢出显示“…”：

.yc{
           width: 500px;
           height: 100px;
           background-color: rgb(226, 187, 187);

           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 5; 
           overflow: hidden;
     }

注意： -webkit-line-clamp: 5; 表示第几行后显示省略号；

效果：

注意：我们把盒子宽度设置成大致能显示几行，然后设置后面的内容变成省略号就可。有些浏览器可能不兼容。

总结：

嘻嘻嘻~~