1.实现原理
主要是使用以下样式,设置文字的多行省略号;
按钮根据省略号的生效与否做出相应的变化
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
2.实现效果
3.完整代码
<!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>
.content {
position: relative;
width: 100%;
/* 多行文本省略号 样式 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* 提前写好样式,用于js动态添加类名,覆盖样式 */
.all_text {
/* 出现此样式名时,设置不出现省略号和展开按钮 */
-webkit-line-clamp: inherit;
}
/* 省略号 展开/收起容器 */
.more {
box-sizing: border-box;
position: absolute;
width: 100px;
right: 0;
bottom: 0;
padding: 0 5px;
background-color: #fff;
}
/* 省略号 */
.ellipsis {
float: left;
}
/* 展开收起按钮 */
.fold {
float: right;
cursor: pointer;
color: #409eff;
}
</style>
<body>
<div id="content" class="content">
数据(Model)和视图(View)是不能直接通讯的,
而是需要通过ViewModel来实现双方的通讯。
当数据变化的时候,viewModel能够监听到这种变化,
并及时的通知view做出修改。同样的,当页面有事件触发时,
viewModel也能够监听到事件,并通知model进行响应。
Viewmodel就相当于一个观察者,监控着双方的动作,
并及时通知对方进行相应的操作
<!-- more这个div用来放置 省略号 以及 展开/收起按钮 -->
<div id="more" class="more">
<div id="ellipsis" class="ellipsis">...</div>
<div id="fold" class="fold" onclick="showUp()">展开</div>
</div>
</div>
</body>
<script>
var content = document.getElementById('content')
var more = document.getElementById('more')
var ellipsis = document.getElementById('ellipsis')
var fold = document.getElementById('fold')
var folding = true // 是否是折叠状态
var foldText = '展开' // 展开 / 收起 按钮文字
// 进入页面就判断ellipsis是否生效了,若没有生效,说明文字内容没有溢出,则不需要展示省略号以及展开按钮,否则反之
if (content.clientHeight < content.scrollHeight) {
more.style.display = 'block'
} else {
more.style.display = 'none'
}
function showUp() {
if (folding) {
content.classList.add('all_text')
foldText = '收起'
ellipsis.style.display = "none"
} else {
content.classList.remove('all_text')
foldText = '展开'
ellipsis.style.display = "block"
}
folding = !folding
fold.innerText = foldText
}
</script>
</html>