文本溢出处理
一、单行文本溢出处理
效果图：
html代码：
<body>
<div class="text">vukfjygfvhjvfgdtryutfvghdfkjgfdhgfhjgdfdgj</div>
<div class="text">除服可以广泛不UK研发与来访不给刘亦菲不各领域和不根本不超过好久</div>
</body>
css代码：
.text {
width: 200px;
background: #668770;
font-size: 24px;
margin: 30px auto;
white-space: nowrap; /*设置文本不换行*/
overflow: hidden; /*设置超出部分隐藏*/
text-overflow: ellipsis; /*设置超出部分以引号形式渲染页面*/
/*display: -webkit-box;*/
/*-webkit-line-clamp: 2;*/
/*-webkit-box-orient: vertical;*/
/*word-break: break-all;*/
}
多行文本溢出处理
效果图：
html代码：(同上)
<body>
<div class="text">vukfjygfvhjvfgdtryutfvghdfkjgfdhgfhjgdfdgj</div>
<div class="text">除服可以广泛不UK研发与来访不给刘亦菲不各领域和不根本不超过好久</div>
</body>
css代码：
.text {
width: 200px;
background: #668770;
font-size: 24px;
margin: 30px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*表示从第2行之后开始处理（超出第2行）*/
-webkit-box-orient: vertical; /*以垂直方向处理文本*/
word-break: break-all; /* 给英文加换行效果*/
}
注意：
- 中文默认换行，英文默认不换行；
- 设置中文不换行：white-space: nowrap;
- 设置英文换行：word-break: break-all;
请多指教~谢谢！