CSS Guidebook

CSS 完全知识体系

文本内容

换行

段落标签

  • <p> 标签是默认自动换行的，但是会对不同的字符采用不同的处理方式
    • 中文：换行
    • 英文和数字：不换行

这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本

This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.This is paragraph.

123456789012345678901234567890123456789012345678901234567890

文本段落标签的默认属性说明

强制不换行

自动换行

强制英文单词断行

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

溢出省略

单行内容溢出省略

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
单行文本内容

多行文本溢出省略（按行数）

  • display: -webkit-box：设为元素为盒子伸缩模型
  • -webkit-box-orient: vertical：伸缩方向设为垂直方向
  • -webkit-line-clamp: 3：超出三行隐藏，并显示省略号

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
多行文本内容超出省略

注意：这个方法只适用于 Webkit 浏览器或移动端

优点：

  1. 响应式截断，根据不同宽度做出调整
  2. 文本超出范围才显示省略号，否则不显示省略号
  3. 浏览器原生实现，所以省略号位置显示刚好

缺点： -webkit-line-clamp 是不规范的属性，没有出现在 CSS 规范草案中，也就是说只有 webkit 内核的浏览器才支持这个属性。

多行文本溢出省略（兼容方案）

使用伪元素实现，将伪元素设为为白色背景，并放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。

持续两周的课程设计结束了，本次已经是我们小组的第三次合作了，相比以前大家都进步了很多，所以合作还是很顺利的。我们这次的是一个 OJ（Online Judge 在线检测代码的平台）持续两周的课程设计结束了，本次已经是我们第三次合作了，相比以前大家都进步了很多，所以合作还是很顺利的。
多行文本内容超出省略兼容方案

注意：将 height 设置为 line-height 的整数倍，防止超出的文字露出

多行文本溢出

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
多行文本溢出

利用浮动布局实现多行文本省略

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
利用浮动布局实现多行文本省略

原生 JavaScript 实现方案

开源方案：

参考资料

Edit this doc on GitHub2/21/2022 13:21:47