持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
前言
本篇文章将学习的是隐藏文字，让文字显示...省略号，且鼠标滑入再悬浮显示完整内容。
话不多说，直接看效果和讲解吧！
效果展示
实践过程（代码讲解）
代码比较简单，也有比较详细的注释；如果其他友友不懂的，欢迎评论区来问哈~
css核心代码
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 1; */
/* 能够显示的行数，超出部分用...表示*/
-webkit-box-orient: vertical;
js代码
// 获取点击参数的方法，替换对应的文本，添加样式;
function hideContent(e) {
// 获取对应的id节点
var node = document.getElementById("content");
// 获取当前点击的data-row对应的参数值
var row = e.getAttribute("data-row");
// 判断是否为空或row为0，清空对应样式
if (!row || row == 0) {
node.style.webkitLineClamp = "";
node.classList.remove("anpai-hide");
node.removeAttribute("title");
return;
}
// row为其他数值，置为对应的参数，完成省略显示
node.style.webkitLineClamp = parseInt(row);
node.classList.add("anpai-hide");
// 添加鼠标滑入，悬浮提示的完整内容（title）
node.title = node.innerText;
}
完整代码
<!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>隐藏文本成...省略；鼠标滑入后再显示悬浮的完整内容</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.anpai-a {
height: 60px;
line-height: 60px;
cursor: pointer;
text-decoration: none;
background: #2f435e;
color: #f2f2f2;
padding: 8px 16px 8px 16px;
font-size: 15px;
font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;
font-weight: bold;
border-radius: 3px;
-webkit-transition: all linear 0.30s;
-moz-transition: all linear 0.30s;
transition: all linear 0.30s;
}
.anpai-a:hover {
background: #385f9e;
}
.anpai-hide {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 1; */
/* 能够显示的行数，超出部分用...表示*/
-webkit-box-orient: vertical;
}
</style>
<body style="text-align: center; background-color: rgb(152, 235, 177);">
<div style="padding:100px 30%;">
<div style="margin:15px;">
<h2>隐藏文本成...省略；鼠标滑入后再显示悬浮的完整内容</h2>
<h6> by <a href="https://juejin.cn/user/2840793779295133" target="_blank">南方者</a></h6>
</div>
<p id="content"> 那晚，我走在黑不溜秋的乡间路上；耳边叭叭传来风敲打着树枝的作响。拿着酒瓶子开始往前走，突然发现前面有个东西趴在地上。
琢磨着，是不是也有个人趴在那；思考间，突然，发觉他好像死死地盯着我，同时开始飞速的冲向这边。
妈耶，刚想转身向后跑，还没来得及，他就扑到脸上来了！“he
tui~ 谁的塑料袋？掉马路边了！还这么大一块！[黑脸]”</p>
<span class="anpai-a" onclick="hideContent(this)" data-row="1">缩成一行</span>
<span class="anpai-a" onclick="hideContent(this)" data-row="2">缩成两行</span>
<span class="anpai-a" onclick="hideContent(this)" data-row="3">缩成三行</span>
<span class="anpai-a" onclick="hideContent(this)" data-row="0">还原</span>
<a class="anpai-a" style="margin-left: 20px;" href="https://juejin.cn/pin/7099393738157326350"
target="_blank">段子来源</a>
</div>
</body>
<script type="text/javascript">
// 获取点击参数的方法，替换对应的文本，添加样式;
function hideContent(e) {
// 获取对应的id节点
var node = document.getElementById("content");
// 获取当前点击的data-row对应的参数值
var row = e.getAttribute("data-row");
// 判断是否为空或row为0，清空对应样式
if (!row || row == 0) {
node.style.webkitLineClamp = "";
node.classList.remove("anpai-hide");
node.removeAttribute("title");
return;
}
// row为其他数值，置为对应的参数，完成省略显示
node.style.webkitLineClamp = parseInt(row);
node.classList.add("anpai-hide");
// 添加鼠标滑入，悬浮提示的完整内容（title）
node.title = node.innerText;
}
showNanFangZheMsg();
function showNanFangZheMsg() {
console.log("*************************************************")
console.log("* 隐藏文本成...省略；鼠标滑入后再显示悬浮的完整内容 *")
console.log("************ 字符串解析 - 掘金 - 南方者 ***********")
console.log("* https://juejin.cn/user/2840793779295133/posts *")
console.log("************* https://nanfangzhe.cn/ ************")
console.log("*************************************************")
}
</script>
</html>
总结
根据需求去做分析，把问题简单化，把问题拿下！
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是南方者，一个热爱计算机更热爱祖国的南方人。
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
