超出文本变省略号

最新推荐文章于 2024-01-23 10:12:28 发布

Mk026617

最新推荐文章于 2024-01-23 10:12:28 发布

阅读量260

点赞数

分类专栏： html 文章标签： css

本文链接：https://blog.csdn.net/Mk026617/article/details/83412447

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div class="demo demo1">
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
</div>

<div class="demo demo2">
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
</div>
</body>

	<meta charset="UTF-8">
	<title>css超出隐藏省略号</title>
</head>
<style type="text/css">
	.demo{ width: 135px;height: auto; border: 1px solid #ccc;border-radius: 5px; margin: 40px auto; padding: 0px 30px;}
	.demo1{white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}/*超出隐藏变省略号*/
    .demo2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; }/*//超出第二行隐藏变省略号*/
</style>
<body>
	
<div class="demo demo1">
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
</div>

<div class="demo demo2">
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
	瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡瞌睡
</div>
</body>