使用 text-overflow: ellipsis
.text {
overflow: hidden; /* 将超出的部分隐藏掉 */
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrapper {
display: flex;
width: 800px;
margin-bottom: 100px;
}
.text {
font-size: 20px;
overflow: hidden; /* 将超出的部分隐藏掉 */
text-overflow: ellipsis;
text-align: justify;
display: flex;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
position: relative;
}
.text::before {
width: 1px;
content: '';
height: calc(100% - 24px);
float: right;
right: 0;
}
.text::after {
content: '';
width: 54px;
height: 1.5em;
position: absolute;
background: red;
}
.btn {
float: right;
clear: both;
height: 1.5em;
width: 54px;
/*margin-left: 10px;*/
font-size: 16px;
padding: 0 8px;
box-sizing: border-box;
background: #3F51B5;
line-height: 24px;
border-radius: 4px;
color: #fff;
cursor: pointer;
border: 0;
}
.exp {
position: absolute;
visibility: hidden;
}
.exp:checked + .text {
display: block; /* 让3行省略的效果失效 */
}
.btn::after {
content: '展开' /*采用content生成*/
}
.exp:checked + .text .btn::after {
content: '收起'
}
.exp:checked + .text .btn::before {
visibility: hidden; /*在展开状态下隐藏省略号*/
}
</style>
</head>
<body>
<div class="wrapper">
<input id="exp1" class="exp" type="checkbox">
<div class="text">
<label class="btn" for="exp1"></label>
浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
</div>
</div>
<div class="wrapper">
<input id="exp2" class="exp" type="checkbox">
<div class="text">
<label class="btn" for="exp2"></label>
浮动元素是如何定位的，当一个元素浮动之
</div>
</div>
</body>
</html>
不使用 text-overflow: ellipsis
<div class="brief-wrap">
<input id="exp3" class="checkbox" type="checkbox">
<div class="brief">
<label class="btn" for="exp3"></label>
浮动元素是如何定位的
正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
在下面的图片中，有三个红色的正方形。其中有两个向左浮动，一个向右浮动。要注意到第二个向左浮动的正方形被放在第一个向左浮动的正方形的右边。如果还有更多的正方形这样浮动，它们会继续向右堆放，直到填满容器一整行，之后换行至下一行。
</div>
</div>
.brief-wrap {
display: flex;
width: 800px;
}
.brief-wrap .brief {
font-size: 24px;
line-height: 44px;
height: auto;
max-height: 140px;
overflow: hidden; /* 将超出的部分隐藏掉 */
position: relative;
}
.brief-wrap .brief::before {
width: 1px;
content: "";
height: calc(100% - 44px);
float: right;
right: 0;
}
.brief-wrap .brief::after {
content: "";
width: 90px;
height: 44px;
position: absolute;
background: #101010;
}
.brief-wrap .brief .btn {
float: right !important;
clear: both;
width: 90px;
font-size: 24px;
line-height: 44px;
box-sizing: border-box;
border-radius: 4px;
color: #fff;
cursor: pointer;
border: 0;
text-align: right;
}
.brief-wrap .brief .btn::after {
content: "...展开"; /*采用content生成*/
}
.brief-wrap .checkbox {
position: absolute;
/*visibility: hidden;*/
}
.brief-wrap .checkbox:checked + .brief {
max-height: fit-content;
}
.brief-wrap .checkbox:checked + .brief .btn::after {
content: "收起";
}
