当文本内容超出盒子时显示省略号

当文本内容超出盒子时，可以使用CSS的text-overflow属性来显示省略号。具体的实现方法有两种：

1. 对于单行文本超出的情况，可以使用以下CSS样式：

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

这样设置之后，超出盒子的文本部分会被隐藏，并用省略号代替。

2. 对于多行文本超出的情况，可以使用以下CSS样式：

.box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 根据需要设置显示的行数 */
  overflow: hidden;
}

这样设置之后，超出盒子的文本部分会被隐藏，并用省略号代替。同时，通过设置-webkit-line-clamp属性来指定显示的行数。

需要注意的是，以上两种方法都需要设置盒子的宽度和高度，并且要确保文本不会自动换行。
#### 引用[.reference_title]
- *1* *3* [文本超出部分显示省略号](https://blog.csdn.net/JJ_Smilewang/article/details/123992510)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue或uniapp内容超出盒子宽度显示省略号](https://blog.csdn.net/weixin_45721912/article/details/129563505)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]