<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>文本溢出隐藏</title>
</head>
<style>
.box1{
border:1px solid #999;
width: 200px;
/* height: 200px; */
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;/*超出两行隐藏*/
}
/*注意:如果设置height高度，不要超过两行的height高度，也不要在下方加padding-bottom,
如果加了padding-bottom,隐藏的第三行可能会显示一部分的内容*/
/*一行文本溢出隐藏*/
.box2{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<body>
<div class="box1">文本超出两行隐藏床前明月光疑是地上霜举头望明月低头思故乡李白静夜思</div>
<div class="box2">一行文本溢出显示省略号一行文本溢出显示省略号</div>
</body>
</html>
CSS文本溢出隐藏
猜你喜欢
转载自blog.csdn.net/spring_007_999/article/details/127903591
今日推荐
周排行