html单行缩略方法
.oneline {
white-space: nowrap; //强制文本在一行内输出
overflow: hidden; //隐藏溢出部分
text-overflow: ellipsis; //对溢出部分加上...
}
html多行缩略(主要针对webkit内核)
.multiline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
CSS代码如下：
<style>
.box {
display: block;
/* display:inline-block; */
width: 100px;
/* 一行start */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
/* 一行end */
color: red;
}
.desc {
/* 正确 */
color: blue;
display: inline; /* ellipsis只对inline生效 */
/* 错误，b标签里的字超出不能显示省略号（...） */
/* display:inline-block; */
}
/* 英文是不会自动换行 */
/* 让英文自动换行 */
.box2 {
background: yellow;
width: 300px;
word-wrap: break-word;
word-break: break-all;
}
.box3 {
/* 该方法适用于WebKit浏览器及移动端 */
/* 多行start */
background: cyan;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 3; /* 块元素显示的文本的行数 */
line-clamp: 3;
/* 此属性不生效 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
overflow-wrap: break-word; /* 设置div换行 */
/* 多行end */
}
.box4 {
/* 该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法 */
/* 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；*/
/* 兼容ie8需要将::after替换成:after */
/* 多行start */
/* background: cyan; */
width: 300px;
position: relative;
line-height: 20px;
/* 多行end */
}
.overflow {
max-height: 40px;
overflow: hidden;
}
.overflow::after,
.overflow:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
HTML代码如下：
<span class="box"
>想起从前呆在南方/许多那里的气息 许多那里的颜色/不知觉心已经轻轻飞起
<b class="desc"
>我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连</b
>时间过得飞快/转眼这些已成回忆 每天都有新的问题/不知何时又会再忆起</span
>
<br>
<div class="box2">
It's always wet / soft there There's always a lot of trivia there / it's
always red and blue So romantic every day
</div>
<br />
<div class="box3">
我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连 It's
always wet / soft there There's always a lot of trivia there / it's always
red and blue So romantic every day时间过得飞快/转眼这些已成回忆
每天都有新的问题/不知何时又会再忆起
</div>
<br />
<div class="box4 multi-line">
我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连 It's
always wet / soft there There's always a lot of trivia there / it's always
red and blue So romantic every day时间过得飞快/转眼这些已成回忆
每天都有新的问题/不知何时又会再忆起
</div>
<br />
<div class="box4 multi-line">我第一次恋爱在那里/不知她现在怎么样</div>
<br />
<div class="box5">我第一次恋爱在那里 时间过得飞快 转眼这些已成回忆 每天都有新的问题 不知何时又会再忆起</div>
