<!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>Document</title>
<style>
.words{
width:400px;
overflow : hidden;
word-break: break-all;/*在任何地方换行*/
display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 */
-webkit-line-clamp: 4;/*规定超过几行的部分截断*/
-webkit-box-orient: vertical; /* 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 */
}
.word{
width:400px;
overflow:hidden; /*超过部分不显示*/
text-overflow:ellipsis; /*超过部分用点点表示*/
white-space:nowrap;/*不换行*/
}
</style>
</head>
<body>
<h1>多行超宽显示省略号</h1>
<div class="words">
For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.
</div>
<h1>1行超宽显示省略号</h1>
<div class="word">
For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.
</div>
</body>
</html>
超宽显示省略号
最新推荐文章于 2022-03-25 15:20:43 发布