写在最前面
.text-ellipsis-single{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text-ellipsis-multiple{
-webkit-line-clamp: 2;// webkit 内核浏览器支持的行数
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;// clip|ellipsis|string 截断|省略号|自定义字符串
}
@mixin multiline-ellipsis($line: 2, $line-height: 1.6em) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $line;
-webkit-box-orient: vertical;
line-height: $line-height;
max-height: $line-height * $line;
}
-webkit-
等内核的方法,看看各个浏览器的兼容性,移动端多用于-webkit
, @minxin text-ellipsis-multiple-compatibility($line: 3, $line-height: 1.6em) {
position:relative;
line-height:$line-height;
height:$line-height * $line;
overflow:hidden;
}
.text-ellipsis-multiple-compatibility{
@inlcude text-ellipsis-multiple-compatibility(3);
&::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
}
}
.perf{
word-break: break-all;
word-wrap:break-word
}
// 字数限制30字,超出省略号代替
function Truancate(textHolder, limit = 30) {
let txt = textHolder.innerHTML;
if (txt.length > limit) {
let newText = txt.substr(0, limit) + ' ...';
textHolder.innerHTML = newText;
}
}
复制代码
function ellipsizeTextElement($element) {
var nodeList = document.querySelectorAll($element);
var elements = Array.prototype.slice.call(nodeList, 0);
elements.forEach(function(element) {
var wordArray = element.innerHTML.split(' ');
while (element.scrollHeight > element.offsetHeight) {
wordArray.pop();
element.innerHTML = wordArray.join(' ') + '...';
}
});
}
复制代码
body {
background-color: #fff;
}
.parent {
line-height: 20px;
max-height: 60px;
position: relative;
overflow: hidden;
&::before {
content: '';
width: 20px;
height: 60px;
float: left;
}
&::after {
content: '...';
left: 100%;
width: 20px;
height: 20px;
background-color: #fff;
float: right;
position: relative;
box-shadow: -4px 0 2px #fff;
transform: translate(-100%, -100%);
}
}
.content {
width: 100%;
margin-left: -20px;
float: right;
}
transform: translate(-100%, -100%);
遮挡末尾的文字