- class="word-break"
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break - 单行文本溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
border:1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
2
2
22
2
2
2
2
2
22
2
2
2
2
2
2
2
2
2
2
</div>
</body>
</html>
单行文本溢出
- 多行文本溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border:1px solid red ;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow:hidden;
}
</style>
</head>
<body>
<div class="module">
121321413252
5436gfgfdb\
5436gfgfdb5436gfgfdb5436gfgfdb5436gfgfdb
5436gfgfdb
5436gfgfdb
5436gfgfdb
5436gfgfdb
rhatrjrtjty
i7i76i76iythgnjy
rusteyetuetiy
eruetjetndg
</div>
</body>
</html>
运行后：
多行文字溢出
网友评论