CSS文本溢出隐藏

最新推荐文章于 2024-08-23 11:10:08 发布

spring_007_999

最新推荐文章于 2024-08-23 11:10:08 发布

阅读量62

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/spring_007_999/article/details/134337714

版权

本文介绍了如何使用CSS中的overflow,text-overflow,line-clamp和white-space属性来控制HTML文本在容器中超出时的隐藏效果，展示了两行和单行文本溢出隐藏的具体实现。

摘要由CSDN通过智能技术生成

超出一行文本隐藏并显示省略号，超出两行文本隐藏并显示省略号，


<!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>