网页中经常会遇到文本内容超出容器宽度或高度的情况，此时需要通过CSS控制文本的溢出样式，同时结合JS实现弹框的显示与隐藏，让用户可以查看完整的文本内容，同时保证页面的整洁性。
一、CSS文本溢出基础设置
首先需要用CSS设置文本溢出后的基础表现，常见的有两种场景：单行文本溢出和多行文本溢出。
1. 单行文本溢出
单行文本溢出需要配合三个CSS属性使用，代码如下：
/* 单行文本溢出样式 */
.single-line-overflow {
width: 200px; /* 固定容器宽度 */
white-space: nowrap; /* 强制文本不换行 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
2. 多行文本溢出
多行文本溢出适配WebKit内核浏览器，代码如下：
/* 多行文本溢出样式，仅适配WebKit内核浏览器 */
.multi-line-overflow {
width: 200px; /* 固定容器宽度 */
display: -webkit-box; /* 使用弹性盒模型 */
-webkit-box-orient: vertical; /* 垂直排列子元素 */
-webkit-line-clamp: 3; /* 限制显示的行数 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
二、弹框显示隐藏的CSS样式
弹框默认隐藏，当需要展示时通过JS添加显示类即可，基础弹框样式如下：
/* 弹框基础样式 */
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
max-width: 300px;
word-wrap: break-word;
z-index: 9999;
display: none; /* 默认隐藏 */
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* 弹框显示状态 */
.tooltip.show {
display: block;
}
三、JS控制弹框显示隐藏逻辑
核心逻辑是监听文本容器的鼠标事件，判断文本是否溢出，再根据事件触发弹框的显示、定位与隐藏。
1. 判断文本是否溢出
通过对比元素的scrollWidth和clientWidth（单行）或者scrollHeight和clientHeight（多行），判断文本是否超出容器范围：
/**
* 判断元素文本是否溢出
* @param {HTMLElement} el 目标元素
* @returns {boolean} 是否溢出
*/
function isTextOverflow(el) {
// 单行文本判断宽度
if (window.getComputedStyle(el).whiteSpace === 'nowrap') {
return el.scrollWidth > el.clientWidth;
}
// 多行文本判断高度
return el.scrollHeight > el.clientHeight;
}
2. 弹框显示与定位
鼠标悬浮到溢出文本容器时，计算弹框位置并显示完整文本：
// 获取弹框元素和所有文本容器
const tooltip = document.querySelector('.tooltip');
const textContainers = document.querySelectorAll('.text-item');
// 鼠标进入容器事件
textContainers.forEach(container => {
container.addEventListener('mouseenter', function(e) {
// 先判断文本是否溢出
if (!isTextOverflow(this)) {
return;
}
// 设置弹框内容为完整文本
tooltip.textContent = this.textContent;
// 计算弹框定位，显示在容器下方
const rect = this.getBoundingClientRect();
tooltip.style.left = rect.left + window.scrollX + 'px';
tooltip.style.top = rect.bottom + window.scrollY + 5 + 'px';
// 显示弹框
tooltip.classList.add('show');
});
// 鼠标离开容器事件
container.addEventListener('mouseleave', function() {
// 隐藏弹框
tooltip.classList.remove('show');
});
});
3. 点击交互控制弹框
如果需要点击文本切换弹框显示隐藏，可调整事件逻辑：
textContainers.forEach(container => {
container.addEventListener('click', function(e) {
// 判断文本是否溢出
if (!isTextOverflow(this)) {
return;
}
// 如果弹框已经显示，则隐藏
if (tooltip.classList.contains('show')) {
tooltip.classList.remove('show');
return;
}
// 设置内容和定位
tooltip.textContent = this.textContent;
const rect = this.getBoundingClientRect();
tooltip.style.left = rect.left + window.scrollX + 'px';
tooltip.style.top = rect.bottom + window.scrollY + 5 + 'px';
tooltip.classList.add('show');
});
});
// 点击页面其他区域隐藏弹框
document.addEventListener('click', function(e) {
if (!e.target.closest('.text-item') && !e.target.closest('.tooltip')) {
tooltip.classList.remove('show');
}
});
四、完整HTML示例
将以上代码组合后的完整示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本溢出弹框示例</title>
<style>
.single-line-overflow {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 10px 0;
border: 1px solid #eee;
padding: 5px;
}
.multi-line-overflow {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
margin: 10px 0;
border: 1px solid #eee;
padding: 5px;
}
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
max-width: 300px;
word-wrap: break-word;
z-index: 9999;
display: none;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tooltip.show {
display: block;
}
</style>
</head>
<body>
<h3>单行文本溢出示例</h3>
<div class="single-line-overflow text-item">这是一段很长很长的单行文本内容，超出容器宽度后会显示省略号，鼠标悬浮可以查看完整内容</div>
<h3>多行文本溢出示例</h3>
<div class="multi-line-overflow text-item">这是一段多行文本内容，当文本行数超过三行的时候，超出部分会显示省略号，点击文本可以切换弹框的显示与隐藏状态，方便用户查看完整的内容信息</div>
<div class="tooltip"></div>
<script>
const tooltip = document.querySelector('.tooltip');
const textContainers = document.querySelectorAll('.text-item');
function isTextOverflow(el) {
if (window.getComputedStyle(el).whiteSpace === 'nowrap') {
return el.scrollWidth > el.clientWidth;
}
return el.scrollHeight > el.clientHeight;
}
textContainers.forEach(container => {
// 悬浮显示弹框
container.addEventListener('mouseenter', function() {
if (!isTextOverflow(this)) return;
tooltip.textContent = this.textContent;
const rect = this.getBoundingClientRect();
tooltip.style.left = rect.left + window.scrollX + 'px';
tooltip.style.top = rect.bottom + window.scrollY + 5 + 'px';
tooltip.classList.add('show');
});
container.addEventListener('mouseleave', function() {
tooltip.classList.remove('show');
});
// 点击切换弹框
container.addEventListener('click', function(e) {
e.stopPropagation();
if (!isTextOverflow(this)) return;
if (tooltip.classList.contains('show')) {
tooltip.classList.remove('show');
return;
}
tooltip.textContent = this.textContent;
const rect = this.getBoundingClientRect();
tooltip.style.left = rect.left + window.scrollX + 'px';
tooltip.style.top = rect.bottom + window.scrollY + 5 + 'px';
tooltip.classList.add('show');
});
});
document.addEventListener('click', function() {
tooltip.classList.remove('show');
});
</script>
</body>
</html>
五、注意事项
- 多行文本溢出的
-webkit-line-clamp属性仅适配WebKit内核浏览器，如果需要兼容其他浏览器，可以通过JS计算文本行数实现 - 弹框定位时需要考虑页面滚动距离，否则滚动后弹框位置会偏移
- 如果页面中有多个弹框场景，建议封装成通用组件，避免重复代码
text_overflowCSSCSSJavaScript弹框修改时间：2026-06-18 06:33:53