html文字溢出隐藏显示
时间: 2023-09-16 07:10:13 浏览: 200
在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 ]
阅读全文