<!DOCTYPE html>
<html lang="en">
<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>
div {
margin: 100px auto;
width: 300px;
height: 400px;
border: 1px solid #ccc;
box-shadow: 0 0 2px 2px silver;
padding: 10px 15px;
}
p {
/* 超过多少行,文本自动隐藏,并且超出部分用省略号表示 */
text-indent: 2rem;
overflow: hidden;
/* line-height: 2rem; 首行缩进两个字符 */
line-height: 2rem;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 4; 超出4行 */
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
<p>
旧版浏览器,如IE 11或更低版本,不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现,你应该退回到其他的 CSS 布局方式,比如结合float 的 display: inline-block 或者
display: table 等。但是,如果您只针对现代浏览器,那么 Flexbox 绝对值得一试。
旧版浏览器,如IE 11或更低版本,不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现,你应该退回到其他的 CSS 布局方式,比如结合float 的 display: inline-block 或者
display: table 等。但是,如果您只针对现代浏览器,那么 Flexbox 绝对值得一试。
旧版浏览器,如IE 11或更低版本,不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现,你应该退回到其他的 CSS 布局方式,比如结合float 的 display: inline-block 或者
display: table 等。但是,如果您只针对现代浏览器,那么 Flexbox 绝对值得一试。
</div>
</body>
</html>
多行文本省略
最新推荐文章于 2024-08-19 18:49:13 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)