CSS实现文本溢出处理

/* 设置元素的基本样式 */
.box {
  width: 200px; /* 定义元素的宽度 */
  height: 100px; /* 定义元素的高度 */
  border: 1px solid #000; /* 定义元素的边框 */
  overflow: hidden; /* 隐藏溢出的内容 */
}
 
/* 设置文本溢出时的显示样式 */
.box::after {
  content: "..."; /* 添加省略号表示文本被截断 */
  position: absolute; /* 绝对定位 */
  right: 5px; /* 右边距设置 */
  bottom: 5px; /* 底部边距设置 */
  background-color: white; /* 背景颜色设置为白色以遮盖原始文本背景 */
}
 
/* 设置元素内文本的样式 */
.box p {
  position: relative; /* 相对定位 */
  white-space: nowrap; /* 保持文本在一行内显示，不换行 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  overflow: hidden; /* 隐藏溢出的内容 */
  width: 100%; /* 宽度设置为100%，确保文本溢出生效 */
}

这段代码展示了如何使用CSS实现文本溢出时的处理，包括使用overflow: hidden;隐藏溢出的内容，以及使用text-overflow: ellipsis;和white-space: nowrap;确保文本在一行内显示，并在末尾添加省略号。