小程序超出显示省略号css，两行显示，单行显示

原创已于 2022-12-12 19:44:33 修改 · 913 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #小程序 #css3

于 2022-01-03 15:02:26 首次发布

本文介绍了一种CSS技巧，如何使用-webkit-line-clamp和word-wrap属性实现英文文本自动换行并限制显示行数。同时，详细讲解了如何设置元素的width、height和line-height。适用于前端开发者处理文本布局问题。

.one-line {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /* 针对英文不会自动换行 */
  word-wrap: break-word;
  word-break: break-all;
}

.two-line {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 针对英文不会自动换行 */
  word-wrap: break-word;
  word-break: break-all;
}

还要加上元素的width，height，line-height