CSS 单/多行文本溢出样式

单行文本溢出省略

核心 CSS 语句

• overflow: hidden; 文字长度超出限定宽度，则截断超出的内容
• white-space: nowrap; 规定段落中的文本不进行换行
• text-overflow: ellipsis; 文本溢出时，用省略号来代替

Demo

<style>
div {
  width: 150px;
  height: 50px;
  border: 1px solid red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
</style>
    这是一段很长的文本这是一段很长的文本
</body>

效果图

CSS 单/多行文本溢出样式 - 小鑫の随笔

多行文本溢出省略

核心语句

• -webkit-line-clamp: 2; 限制在一个块元素显示的文本的行数，2 表示最多显示两行，为了实现该效果，需要组合其他的 webkit 属性
• -webkit-box-orient: vertical; 和 1 结合使用，设置或检索伸缩盒对象的子元素的排列方式
• display: -webkit-box; 和 1 结合使用，将对象作为弹性伸缩盒子模型显示
• overflow: hidden; 文字长度超出限定宽度，则截断超出的内容
• text-overflow: ellipsis; 文本溢出时，用省略号来代替

Demo

<style>
div {
  width: 150px;
  height: 40px;
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;