css - 文本溢出省略
css - 文本溢出省略
单行
@mixin text_ellipsis() {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行省略
@mixin text_ellipsis_n($n: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $n;
overflow: hidden;
}
ie
@mixin text_ellipsis_n($n: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $n;
overflow: hidden;
}
float布局
<!--
* @createDate: 2022-07-08 16:05:02
* @Author: zclee
* @LastEditTime: 2022-07-08 16:10:19
* @LastEditors: zclee
* @FilePath: \lee-vue-press\cnblog\css - 文本溢出省略.html
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.height-fixed {
height: 40px;
overflow: hidden;
line-height: 20px;
}
.height-fixed .text {
float: right;
width: 100%;
margin-left: -5px;
word-break: break-all;
}
.height-fixed::before {
float: left;
width: 5px;
content: '';
height: 100%;
}
.height-fixed::after {
float: right;
content: '...';
height: 20px;
line-height: 20px;
width: 16px;
/* 40 = 省略号长度 + padding-left长度 */
margin-left: -40px;
padding-left: 24px;
/* 真实长度 小于等于5 */
padding-right: 5px;
position: relative;
left: 100%;
top: -20px;
background: -webkit-linear-gradient(left, transparent, #fff 50%);
background: -o-linear-gradient(right, transparent, #fff 50%);
background: -moz-linear-gradient(right, transparent, #fff 50%);
background: linear-gradient(to right, transparent, #fff 50%);
}
</style>
<body>
<div class="height-fixed">
<div class="text">
这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很
长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长
</div>
</div>
</body>
</html>
Lee2
