[分享]css内容超过三行自动省略号

在设计网页时，很多时候我们需要在页面上显示一些很长的内容，比如长的标题、描述、文章等。这时候如果直接显示整个内容，就会严重影响页面的美观性和用户体验。因此，CSS提供了一个非常实用的属性——texto...

在设计网页时，很多时候我们需要在页面上显示一些很长的内容，比如长的标题、描述、文章等。这时候如果直接显示整个内容，就会严重影响页面的美观性和用户体验。因此，CSS提供了一个非常实用的属性——text-overflow，可以让我们在内容超出一定长度时，自动省略号来代替超出的内容。
这个属性通常需要配合white-space和overflow属性一起使用，以确保省略号的出现位置和样式都符合我们的需求。下面是一个display为block的p元素的示例代码：

p{
  width: 200px;
  white-space: nowrap; /*不换行*/
  overflow: hidden;
  text-overflow: ellipsis; /*省略号展示*/
} 

其中，white-space用来控制文本是否换行，nowrap表示不换行；overflow用来控制内容超过容器宽度时的处理方式，hidden表示内容溢出部分会被隐藏起来。text-overflow则用来指定超过一定长度时省略号的展示方式，其中ellipsis表示末尾省略号。
通过这些属性的组合，我们就可以方便地实现内容自动省略号的效果了。无论您是在设计移动端网页还是pc端网站，都可以使用这个技巧来提高页面的美观性和用户体验。