文本溢出自动隐藏，鼠标悬浮显示

前端

2022-11-12 16:49:14

文本溢出时优雅显示：使用 CSS text-overflow 和 title 属性

在网页设计中，我们经常会遇到文本溢出容器的问题。为了解决这个问题，CSS 提供了 text-overflow 属性，用于控制文本内容在容器宽度内的显示方式。

text-overflow 属性简介

text-overflow 属性有三种属性值：

clip：将内容剪切掉，只显示容器内能容纳的部分。
ellipsis：在内容末尾添加省略号 (...)，表示内容被截断了。
inherit：继承父元素的 text-overflow 属性值。

实现文本溢出显示省略号

一般情况下，我们可以使用 ellipsis 属性值来实现文本溢出时显示省略号的效果。

.text-container {
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

鼠标悬浮显示完整文本

如果我们想要在鼠标悬浮在文本上时显示完整的文本，可以使用 CSS 的 title 属性。title 属性用于在鼠标悬浮在元素上时显示提示信息。

.text-container {
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.text-container:hover {
  title: /* 完整的文本 */;
}

使用 tooltip 工具提示

如果我们想要在不悬浮鼠标的情况下显示完整的文本，可以使用 tooltip 工具提示。

实战示例

以下是一个使用 text-overflow 和 title 属性实现文本溢出显示省略号和鼠标悬浮显示完整文本效果的代码示例：

<div class="text-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id velit feugiat, vestibulum lacus vitae, varius dui. Fusce quis nunc ut erat scelerisque tincidunt. Etiam rhoncus, tellus eu sodales luctus, augue purus egestas ligula, eu vehicula nulla dui a purus. Proin sed vehicula ligula. Sed sed volutpat neque.
</div>

.text-container {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-container:hover {
  title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id velit feugiat, vestibulum lacus vitae, varius dui. Fusce quis nunc ut erat scelerisque tincidunt. Etiam rhoncus, tellus eu sodales luctus, augue purus egestas ligula, eu vehicula nulla dui a purus. Proin sed vehicula ligula. Sed sed volutpat neque.;
}

常见问题解答

1. 为什么我无法在鼠标悬浮时看到提示信息？

确保你已正确设置了 title 属性，并且鼠标悬停在 text-container 元素上。

2. 如何自定义省略号的样式？

可以使用 ::after 伪元素和 content 属性来自定义省略号的样式。

3. 是否可以使用 text-overflow 属性来控制多行文本的溢出？

text-overflow 属性仅适用于单行文本。对于多行文本，可以使用 overflow-wrap 属性。

4. 如何在移动设备上显示完整的文本？

可以使用 CSS 媒体查询来针对不同的屏幕尺寸设置不同的 text-overflow 值。

5. 还有哪些其他方法可以处理文本溢出？

除了 text-overflow 和 title 属性，还可以使用 white-space 和 word-break 属性来控制文本溢出。

总结