单行文本自动缩略
效果图
代码实现：
.ellipsis-box {
width: 200px; /* 固定宽度 */
white-space: nowrap; /* 强制单行显示 */
overflow: hidden; /* 隐藏溢出文本 */
text-overflow: ellipsis; /* 添加省略号 */
border: 1px solid #ccc; /* 可选：用于查看边界 */
}
说明
- 宽度：确保元素有一个明确的宽度设置。
- 白色空格处理：
white-space: nowrap是强制文本在一行内显示的关键。 - 隐藏溢出：
overflow: hidden需要设置以防止文本超出容器时显示。 - 文本溢出效果：
text-overflow: ellipsis添加省略号。
如果您已经设置了这些属性，但仍然无法实现 ellipsis 效果，请检查以下事项：
- 父元素的样式：确保父元素没有影响子元素宽度或显示的样式，例如
flex容器可能会影响子元素宽度。 - 浏览器兼容性：虽然大多数现代浏览器都支持这些属性，但检查浏览器是否支持这些 CSS 属性。
- 其他 CSS 冲突：查看是否有其他 CSS 样式（如
float或position）影响了元素的布局。
多行文本自动缩略
效果图
代码实现：
.clamp-box {
width: 300px; /* 固定宽度 */
line-height: 1.5; /* 行高 */
max-height: 4.5em; /* 控制显示的最大高度（行高 * 行数） */
overflow: hidden; /* 隐藏溢出文本 */
display: -webkit-box; /* 盒模型显示 */
-webkit-box-orient: vertical; /* 垂直排列 */
-webkit-line-clamp: 3; /* 显示的行数 */
text-overflow: ellipsis; /* 溢出显示省略号 */
}
说明
width: 设置容器的宽度以限制文本的水平边界。line-height: 设置行高以便更好地控制每行的高度。max-height: 通过line-height和行数计算得出，控制文本块的最大高度。overflow: hidden: 隐藏超出容器边界的内容。display: -webkit-box: 使用弹性盒布局显示。-webkit-box-orient: vertical: 设置盒子的排列方式为垂直。-webkit-line-clamp: 将显示行数限制为指定的行数。text-overflow: ellipsis: 在文本溢出时显示省略号。
注意
- 浏览器支持:
-webkit-line-clamp是一个非标准的 CSS 属性，在 WebKit 内核的浏览器中（如 Chrome 和 Safari）得到广泛支持，但在非 WebKit 浏览器（如 Firefox）中可能需要 polyfill 或其他替代方案。 - 多行省略的替代方案: 如果需要在所有浏览器中都支持，可以考虑使用 JavaScript 进行文本截断和省略号处理。
