|
多行文本的省略和隐藏。其实在ios上面还是会有兼容性问题 惨不忍睹，做不到 在文本末尾实现 文字环绕 展开的那种方式 只能通过css的其他的方式来处理，
这个展开的问题 本来就是前端处理中的一个难题。 哎 想在短时间处理和各个平台的兼容性还是不容易。 在这个做个笔记。
<!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>
<style>
.wrap {
display: flex;
}
.text {
line-height: 1.5;
max-height: 4.5em;
overflow: hidden;
transition: all 1s;
}
.text::before {
content: '';
float: right;
height: 100%;
margin-bottom: -22px;
background: red
}
.btn {
float: right;
clear: both;
font-size: 14px;
color: #f00;
}
.btn::before {
content: '...';
color: #333;
}
.btn::after {
content: "展开";
}
#check {
display: none;
}
#check:checked+.text {
max-height: none;
}
#check:checked+.text>.btn::after {
content: "收起";
}
#check:checked+ .text>.btn::before {
visibility: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<input type="checkbox" name="" id="check">
<div class="text">
<label for="check" class="btn"></label>
零零落落零零落落零零落落零零落落零零落落零零落落零零落落来了额sad sad萨达撒打算打算打大叔大叔大叔的撒打算大的坎坎坷坷坎坎坷坷坎坎坷坷坎坎坷坷坎坎坷坷111可口可乐坎坎坷坷快乐快乐快乐sodas
</div>
</div>
</body>
</html>
参考链接 ：
https://blog.csdn.net/qiwoo_weekly/article/details/117094460?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0.no_search_link&spm=1001.2101.3001.4242.1
|