📌  相关文章
📜  文本溢出省略号悬停工具提示 css (1)

📅  最后修改于: 2023-12-03 15:40:05.079000             🧑  作者: Mango

文本溢出省略号悬停工具提示 CSS

在网页中，当文本内容超过了其指定的容器宽度或高度时，浏览器会自动将其截断。但在某些场景中，我们希望文本内容超出容器范围时能够自动省略，并添加一个悬停工具提示来显示完整内容。这就是本文要介绍的“文本溢出省略号悬停工具提示 CSS”。

实现

要实现文本溢出省略号和悬停工具提示的效果，可以使用text-overflow和::after选择器。

1. text-overflow

text-overflow属性用于指定当文本溢出容器范围时的处理方式，包括：

  • clip：截断文本并隐藏省略部分。
  • ellipsis：截断文本，用省略号...替代省略部分。
  • string：截断文本，用指定的字符串替代省略部分。

我们可以使用text-overflow: ellipsis来实现省略号效果。

2. ::after

::after选择器用于向元素的内容之后添加内容。我们可以使用它来实现悬停工具提示。

具体实现如下：

.container {
  width: 200px; /* 容器宽度 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 文本溢出省略号 */
  white-space: nowrap; /* 禁止换行 */
  position: relative; /* 设置相对定位 */
}

.container::after {
  content: attr(title); /* 添加提示内容 */
  position: absolute; /* 设置绝对定位 */
  top: 100%; /* 紧贴父容器底部 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 宽度与父容器相同 */
  padding: 5px; /* 添加内边距 */
  font-size: 14px; /* 字体大小 */
  color: #666; /* 字体颜色 */
  background-color: #fff; /* 背景色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  opacity: 0; /* 初始透明度为0 */
  transition: opacity 0.3s; /* 过渡效果 */
}

.container:hover::after {
  opacity: 1; /* 悬停时透明度为1 */
}
3. HTML

完整的HTML结构如下：

<div class="container" title="这是一段很长很长很长很长很长很长很长很长很长的文本">这是一段很长很长很长很长很长很长很长很长很长的文本</div>

其中，title属性用于指定悬停工具提示的内容。

示例

下面是一个完整的示例，可以在浏览器中查看效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本溢出省略号悬停工具提示 CSS</title>
    <style>
      .container {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
      }

      .container::after {
        content: attr(title);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 5px;
        font-size: 14px;
        color: #666;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: opacity 0.3s;
      }

      .container:hover::after {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container" title="这是一段很长很长很长很长很长很长很长很长很长的文本">这是一段很长很长很长很长很长很长很长很长很长的文本</div>
  </body>
</html>

效果如下：

文本溢出省略号悬停工具提示 CSS

总结

本文介绍了使用CSS实现文本溢出省略号和悬停工具提示的方法。这种效果在项目中经常用到，希望本文的介绍能够对你有所帮助。