在HTML中，可以使用以下样式属性来实现
文字溢出隐藏显示：
1. `white-space: nowrap;`：强制让换行的
文字在
一行显示。
2. `overflow: hidden;`：
隐藏溢出的部分
文字。
3. `text-overflow: ellipsis;`：使用省略号来
显示文字溢出。
下面是一个示例代码，演示了如何使用上述样式属性实现
单行文字溢出隐藏显示省略号：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
单行文字溢出隐藏显示省略号</title>
<style>
.box1 {
width: 100px;
height: 50px;
background-color: aquamarine;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">
溢出隐藏溢出隐藏溢出隐藏溢出隐藏</div>
</body>
</html>
```
如果要实现
多行文字溢出隐藏显示省略号，可以使用以下样式属性：
1. `overflow: hidden;`：
溢出隐藏。
2. `text-overflow: ellipsis;`：文本
溢出显示省略号。
3. `display: -webkit-box;`：将对象作为弹性伸缩盒子模型。
4. `-webkit-box-orient: vertical;`：设置弹性伸缩盒子元素的排列方式为竖排。
5. `-webkit-line-clamp: 2;`：限制一个块元素
显示的内容的行数。
下面是一个示例代码，演示了如何使用上述样式属性实现
多行文字溢出隐藏显示省略号：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
多行文本
溢出显示省略号</title>
<style>
.box {
width: 100px;
background: pink;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
</head>
<body>
<div class="box">要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本要
显示的文本</div>
</body>
</html>
```
希望对你有帮助！
#### 引用[.reference_title]
- *1* [
单行文字溢出隐藏显示省略号](https://blog.csdn.net/m0_62823653/article/details/123276173)[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,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [
css实现
单行、
多行文本
溢出隐藏并
显示省略号](https://blog.csdn.net/zoomsui/article/details/131223947)[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,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
6729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
