css三行之后超出点点点

CSS中通过text-overflow属性来实现超出部分显示为省略号的效果。当一个元素宽度不足以显示所有内容时，通常会自动换行使内容全部显示。但是有时候我们希望在内容过长超出一定长度后，用省略号代替多余的内容，以达到更好的视觉效果。

/*以单行文本为例*/
.text {
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*溢出部分以省略号表示*/
  overflow: hidden; /*隐藏超出部分*/
} 

以上代码中，text-overflow为实现省略号效果的关键属性，设置为ellipsis表示使用省略号。同时还需要设置white-space为nowrap，禁止内容自动换行导致省略号失效。最后将overflow设置为hidden以隐藏多出的内容。

需要注意的是，text-overflow仅适用于单行文本，如果是多行文本，需要使用其他方法来实现相似的效果。

/*以多行文本为例*/
.text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*最多显示3行*/
  -webkit-box-orient: vertical; /*从上往下排列*/
} 

以上代码将多行文本的父元素设置为display为-webkit-box，再将子元素显示行数限制为3行，多余内容使用省略号隐藏。同时设置-webkit-box-orient为vertical表示让子元素从上到下排列。

总之，通过text-overflow属性和其他相关属性的搭配使用，我们可以实现CSS样式中“三行之后超出点点点”的省略号效果，提高页面的美观性和可读性。