css 如何控制文字换行、省略

在CSS中，可以使用以下属性来控制文字的换行和省略：

1. white-space: 控制如何处理元素内的空白。
2. word-break: 控制如何在单词内换行。
3. overflow-wrap (或 word-wrap): 控制长单词或URL内部是否应该换行。
4. text-overflow: 当文本溢出包含它的元素时，如何显示省略（...）。

换行

/* 当需要保留换行时 */
p {
  white-space: pre-wrap; /* 保留空白符序列，但是允许文本换行 */
}
 
/* 强制在边界处换行 */
p {
  word-break: break-all; /* 可以在任意字符之间换行 */
}

省略

/* 当文本溢出容器时显示省略符号 */
p {
  text-overflow: ellipsis; /* 使用省略符号来表示文本被截断 */
  overflow: hidden; /* 确保溢出的文本会被隐藏 */
  white-space: nowrap; /* 不允许换行 */
}

使用多行文本省略

/* 多行文本省略 */
p {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略符号 */
}

注意：-webkit-line-clamp 属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari。其他浏览器可能需要其他解决方案。