项目小记-----多行折行加省略号

最新推荐文章于 2025-04-30 01:11:37 发布

闭眼打键盘

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量428

点赞数 3

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/a870017443/article/details/137824257

版权

  /* 使用WebKit内核的旧版弹性盒模型，将元素作为弹性容器 */
  display: -webkit-box;
  /* 设置弹性容器的主轴方向为垂直方向，即子元素按垂直方向排列 */
  -webkit-box-orient: vertical;
  /* 限制容器内文本的最大行数为6行 */ // 每一个行数都不一样，所以需要在具体的地方设置
  // -webkit-line-clamp: 6;
  /* 设置文本溢出时以省略号显示 */
  overflow: hidden;
  /* 设置文本溢出时以省略号显示 */
  text-overflow: ellipsis;
  // -webkit-line-clamp: 6;
  /* 允许文本在行内换行，保留空白符（如空格、制表符），并在换行处保持单词的完整性 */
  white-space: pre-wrap;
  /* 强制在单词内部进行换行，即使没有常规的换行点（如空格、连字符） */
  word-break: break-all;
  /* 当文本溢出容器时，以省略号（…）替代超出部分的文本 */
  text-overflow: ellipsis;
  /* 隐藏超出容器的多余内容，包括文本和图像 */
  overflow: hidden;