css中文本不换行显示省略号和换行后显示省略号

在CSS中，可以使用white-space属性来控制文本是否换行，并结合text-overflow和overflow属性来实现文本超出容器边界时显示省略号的效果。

以下是实现不换行文本显示省略号和换行后显示省略号的CSS代码示例：

.nowrap-ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
 
.wrap-ellipsis {
  white-space: normal; /* 允许换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
}
 
.wrap-ellipsis::after {
  content: "..."; /* 在文本末尾添加省略号 */
  position: absolute; /* 绝对定位 */
  right: 0; /* 右对齐 */
  bottom: 0; /* 底部对齐 */
  background-color: white; /* 背景色与容器背景相同，以便省略号不再显示省略号 */
}

在HTML中使用这些类：

<div class="nowrap-ellipsis">这是一段不换行的文本，超出部分显示省略号...</div>
<div class="wrap-ellipsis">这是一段允许换行的文本，超出容器部分显示省略号</div>

对于换行后显示省略号，由于CSS本身不能直接判断是否换行，可以采用一些技巧，例如使用伪元素在最后手动添加省略号，并假设文本已经换行来展示省略号。这种方法并不是完美的，因为它不能真正地检测文本是否真的换行，但在大多数情况下，它可以近似实现所需的效果。