Single line multi-line text overflow displays ellipses

In CSS, you can use the text-overflow attribute to display ellipses when text overflows. At the same time, you also need to combine the white-space and overflow attributes to control text wrapping and overflow hiding. The following introduces how to display ellipses in single-line and multi-line text overflow:

Single-line text overflows to display ellipses: For single-line text, we can achieve the effect of overflowing ellipses through the following CSS:

.single-line {
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 控制文本溢出时的显示方式 */
  text-overflow: ellipsis; /* 使用省略号来表示文本溢出 */
}

Multi-line text overflow displays ellipses:

.multi-line-ellipsis {
  display: -webkit-box; /* 将元素视为一个弹性伸缩盒子 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的子元素垂直排列 */
  overflow: hidden; /* 溢出内容隐藏 */
  -webkit-line-clamp: 3; /* 控制显示的行数 */
}

It should be noted that -webkit-line-clamp is a non-standard WebKit attribute and may not be supported in some browsers. For compatibility, you may want to add some browser prefixes or consider using other methods such as JavaScript to implement ellipsis display for multi-line text. Since the above two properties are CSS3 properties, no browser is compatible, so a webkit- must be added in front to be compatible with some browsers.