1200字范文 > 【HTML】div p等标签里的文字内容太长让其显示省略鼠标滑入再悬浮完整内容。

【HTML】div p等标签里的文字内容太长让其显示省略鼠标滑入再悬浮完整内容。

时间：2022-08-19 13:00:53

前言

本篇文章将学习的是隐藏文字，让文字显示…省略号，且鼠标滑入再悬浮显示完整内容。

话不多说，直接看效果和讲解吧！

效果展示

实践过程（代码讲解）

代码比较简单，也有比较详细的注释；如果其他友友不懂的，欢迎评论区来问哈~

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="/user/2840793779295133" target="_blank">南方者</a></h6></div><p id="content">那晚，我走在黑不溜秋的乡间路上；耳边叭叭传来风敲打着树枝的作响。拿着酒瓶子开始往前走，突然发现前面有个东西趴在地上。琢磨着，是不是也有个人趴在那；思考间，突然，发觉他好像死死地盯着我，同时开始飞速的冲向这边。妈耶，刚想转身向后跑，还没来得及，他就扑到脸上来了！“hetui~ 谁的塑料袋？掉马路边了！还这么大一块！[黑脸]”</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="/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("* /user/2840793779295133/posts *")console.log("************* / ************")console.log("*************************************************")}</script></html>