Text overflow [single-line and multi-line text overflow]

Single line text overflow method:

method one:

Show ellipsis (ellipsis): When a single line of text overflows, an ellipsis is displayed to indicate that it is truncated. The specific implementation method is to set text-overflow: ellipsis, and must also set the white-space and overflow attributes.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Method Two:

Display string (string): When the single-line text overflows, display the specified string. The specific implementation method is to set text-overflow: string, and set the content attribute at the same time.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

.text::after {
  content: "..."; /* 溢出时显示... */
}

Method three:

No newline (clip): When a single-line text overflows, the excess part is cut directly. The specific implementation method is to set text-overflow: clip, and must also set the white-space and overflow attributes.

.text {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: clip; /* 剪切 */
}

Multiline text overflow:

method one:

Show ellipsis (ellipsis): When multi-line text overflows, show ellipsis to indicate that it is truncated. The specific implementation method is to set display: -webkit-box, -webkit-box-orient: vertical, and must also set the overflow and text-overflow properties.

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

Method Two:

Use JavaScript to handle multi-line text overflow: In actual development, we can also use JavaScript to handle multi-line text overflow. The more popular libraries include line-clamp.js and clamp.js.

<div class="text" id="text">
  一段多行文本，需要进行溢出处理...
</div>

<script src="https://unpkg.com/clamp-js/dist/clamp.min.js"></script>
<script>
  clamp(document.getElementById('text'), { clamp: 3 });
</script>