[分享]css两行溢出自动省略

CSS是一种用于网页设计的样式表语言。它可以控制网页中各种元素的外观和布局。在CSS中，我们可以通过一些属性来控制文本的显示效果，例如：字体大小、颜色、粗细、间距等等。但是，当文本长度超过了容器的宽度...

CSS是一种用于网页设计的样式表语言。它可以控制网页中各种元素的外观和布局。在CSS中，我们可以通过一些属性来控制文本的显示效果，例如：字体大小、颜色、粗细、间距等等。但是，当文本长度超过了容器的宽度时，文本就会自动换行。这时候，如果我们希望显示的文本只占一行，并且超出部分自动省略，则可以使用CSS中的text-overflow属性。

p {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
} 

上面的代码中，我们给p标签添加了三个属性，分别是：white-space、overflow、text-overflow。其中，white-space用于禁止文本的换行，overflow用于隐藏文本溢出的部分，text-overflow则用于表示超出部分用省略号表示。

在实际应用中，我们可以根据需要来设置容器的宽度和高度，例如：

.container {
  width: 200px; /* 容器宽度 */
  height: 20px; /* 容器高度 */
  border: 1px solid #ccc; /* 容器边框 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
} 

上面的代码中，我们给容器设置了宽度和高度，并且添加了边框，使其看起来更加美观。同时，我们也将overflow和text-overflow属性应用到了容器中。

总之，使用text-overflow属性可以让我们更加灵活地控制文本的显示效果，达到更好的展示效果。