CSS控制文本内容一行或多行超出部分显示省略号
效果展示
在写前端页面时，通常会遇到文字超出后显示省略号
单行文本超出显示省略号
p{
width: 200px;
height: 100px;
border: 1px solid black;
/* 强制超出不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 文本超出显示成... */
text-overflow: ellipsis;
}
多行文本超出显示省略号
div{
padding: 0 10px;
width: 200px;
/* 不定义高度 */
/* height: 200px; */
border: 1px #000000 solid;
/* 文本超出显示成... */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 设置可显示的行数 */
-webkit-line-clamp: 4;
overflow: hidden;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本超出显示省略号</title>
<style type="text/css">
p{
width: 200px;
height: 100px;
border: 1px solid black;
/* 强制超出不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 文本超出显示成... */
text-overflow: ellipsis;
}
div{
padding: 0 10px;
width: 200px;
/* 不定义高度 */
/* height: 200px; */
border: 1px #000000 solid;
/* 文本超出显示成... */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 设置可显示的行数 */
-webkit-line-clamp: 4;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 单行文本超出显示省略号 -->
<p>把很长的一段文本中溢出的内容隐藏，出现省略号</p>
<!-- 多行文本超出显示省略号 -->
<div>
大国青年什么样？他们用青春改变祖国，义无反顾；他们把青春热血融进祖国山河；他们用青春把不可能变为可能，还有的他们永远留在了青春里！
</div>
</body>
</html>
