<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 40px;
background-color: pink;
overflow: hidden;
/* 强制在同一内显所有文本,直到文本结束或者遇到<br>才换行 */
white-space: nowrap;
/* 注意首先要强制一行内显示,然后搭配overflow:hidden;使用 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
fwohifnvbuwgobowbv sovnqebfbsbovbabfbob sbvv
</div>
</body>
</html>
文本在一行显示
最新推荐文章于 2023-02-27 23:51:32 发布
该博客展示了如何使用CSS的`white-space: nowrap`、`overflow: hidden`和`text-overflow: ellipsis`属性来实现当文本内容超过指定容器宽度时,以省略号形式隐藏超出部分。
摘要由CSDN通过智能技术生成