一、位于文本下方的
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.outBox {
width: 300px;
height: 60px;
}
.text {
word-break: break-all;
margin-bottom: 0;
}
.operateBtn {
color: rgb(51, 51, 244);
cursor: pointer;
}
.colse {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.display {
display: none;
}
</style>
</head>
<body>
<div class="outBox">
<p class="text">
我是嘻嘻哈哈我是嘻嘻哈哈我是嘻嘻哈哈我是嘻嘻哈哈嘿嘿哇哇
哇嘻嘻哈哈嗨哇哦哈helloTOMEYESSOWS
</p>
<span class="operateBtn">展开</span>
</div>
<script>
// 定义一个函数用来获取指定类名的dom
function $(className) {
return document.getElementsByClassName(className)[0];
}
// 获取dom
const outBox = $("outBox");
const textDom = $("text");
const operateDom = $("operateBtn");
// 获取高/外层元素内容高度
const outBoxH = $("outBox").clientHeight;
const textH = $("text").clientHeight;
if (textH > outBoxH) {
textDom.classList.add("colse");
} else {
operateDom.classList.add("display");
}
operateDom.onclick = function () {
if (operateDom.innerText === "展开") {
textDom.classList.remove("colse");
operateDom.innerText = "收起";
} else {
textDom.classList.add("colse");
operateDom.innerText = "展开";
}
};
</script>
</body>
</html>
二、位于右下角的
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-size: 14px;
}
.wrap {
/* 不加这一层的话，下面给 .moreThan3::before加的高度将不生效*/
display: flex;
}
.btn {
display: none;
line-height: 1;
color: blue;
float: right;
clear: both;
cursor: pointer;
}
.outBox {
text-align: justify;
/* 相當于設置了lihei-height的值為:fontSize*1.5; */
line-height: 1.5;
/* 相當于設置了最大高度值為3個行高的高度，也就是三行 */
/* max-height: 4.5em; */
}
.line-clamp3 {
-webkit-line-clamp: 3;
}
.line-clamp-max {
/* 给一个极限值，就可以显示展开的效果 */
-webkit-line-clamp: 999;
}
.moreThan3 {
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
/* 写这个是为了让按钮正确的展示在右下角，且文字承包围样式 */
.moreThan3::before {
content: "";
background-color: red;
height: 100%;
margin-bottom: -16px;
width: 0px;
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="outBox">
<div class="btn">展開</div>
哈哈哈哈哈哈哈哈哈哈，叶叶叶叶叶叶哇哈哈余音绕梁咀嚼拉各斯村工骤，同，需要奇葩夺回归冰。
哈哇哈哈啊哈哈黑猫警长，啊哈哈，啊哈哈黑猫警长长长长迅哥儿哟嘻嘻嘻嘻一只为授信回去哈哈
哈哈哈我們的亞洲中國今天的北京、深圳、上海、廣州、杭州、南京、天津、重慶濟南哈葉
</div>
</div>
<script>
// 定義一個方法來獲取dom
function $(selector) {
return document.querySelector(selector);
}
// 判斷文本內容是否超過3行，即14 * 1.5 * 3 = 63
const outBoxDom = $(".outBox");
const btnDom = $(".btn");
if (outBoxDom.offsetHeight > 63) {
btnDom.style.display = "block";
outBoxDom.classList.add("moreThan3");
outBoxDom.classList.add("line-clamp3");
} else {
btnDom.style.display = "none";
}
btnDom.addEventListener("click", () => {
if (btnDom.innerText === "展開") {
btnDom.innerText = "收起";
outBoxDom.classList.remove("line-clamp3");
outBoxDom.classList.add("line-clamp-max");
} else {
btnDom.innerText = "展開";
outBoxDom.classList.remove("line-clamp-max");
outBoxDom.classList.add("line-clamp3");
}
});
</script>
</body>
</html>
三、位于右下角——纯CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
display: flex;
margin: 50px auto;
width: 800px;
overflow: hidden;
/* resize: horizontal; */
border-radius: 8px;
padding: 15px;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.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;
line-height: 1.5;
max-height: 4.5em;
transition: 0.3s max-height;
}
.text::before {
content: "";
height: calc(100% - 26px);
float: right;
}
.text::after {
content: "";
width: 999vw;
height: 999vw;
position: absolute;
box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
margin-left: -100px;
}
.btn {
position: relative;
float: right;
clear: both;
margin-left: 20px;
font-size: 16px;
padding: 0 8px;
background: #3f51b5;
line-height: 24px;
border-radius: 4px;
color: #fff;
cursor: pointer;
/* margin-top: -30px; */
}
.btn::after {
content: "展开";
}
.exp {
display: none;
}
.exp:checked + .text {
max-height: none;
}
.exp:checked + .text::after {
visibility: hidden;
}
.exp:checked + .text .btn::before {
visibility: hidden;
}
.exp:checked + .text .btn::after {
content: "收起";
}
.btn::before {
content: "...";
position: absolute;
left: -5px;
color: #333;
transform: translateX(-100%);
}
</style>
</head>
<body>
<div class="wrapper">
<input id="exp1" class="exp" type="checkbox" />
<div class="text">
<label class="btn" for="exp1"></label>
哈哈哈哈哈哈哈哈哈哈，叶叶叶叶叶叶哇哈哈余音绕梁咀嚼拉各斯村工骤，同，需要奇葩夺回归冰。
哈哇哈哈啊哈哈黑猫警长，啊哈哈，啊哈哈黑猫警长长长长迅哥儿哟嘻嘻嘻嘻一只为授信回去哈哈
哈哈哈我們的亞洲中國今天的北京、深圳、上海、廣州、杭州、迅哥兒
</div>
</div>
</body>
</html>
