CSS 截断超长的URL以防止溢出

在本文中，我们将介绍如何使用CSS截断超长的URL以防止溢出。当我们在网页中显示超长的URL链接时，如果不进行适当的处理，这些链接可能会溢出其容器并导致页面显示不正常。通过使用CSS属性和伪元素，我们可以截断这些超长的URL并在容器中显示完整的链接。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用text-overflow属性截断URL

CSS的text-overflow属性可以用于在溢出容器时截断文本并显示省略号。我们可以将其应用于链接元素，以便在超长的URL时显示省略号。下面是一个示例：

a {
  white-space: nowrap;  /* 禁止换行 */
  overflow: hidden;  /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 使用省略号截断文本 */
}

在上面的代码中，我们首先使用white-space: nowrap禁止链接换行，然后使用overflow: hidden属性将超出容器的部分隐藏起来。最后，我们使用text-overflow: ellipsis属性在URL溢出时显示省略号。

使用伪元素添加省略号

除了使用text-overflow属性，我们还可以使用伪元素来添加省略号。通过在链接元素的::after伪元素中添加内容，并使用绝对定位将其放置在链接的末尾，我们可以实现截断URL并显示省略号的效果。下面是一个示例：

a {
  position: relative;  /* 相对定位 */
  display: inline-block;  /* 行内块元素 */
}

a::after {
  content: "...";  /* 添加省略号 */
  position: absolute;  /* 绝对定位 */
  bottom: 0;  /* 放置在链接的末尾 */
  right: 0;
  background-color: white;  /* 覆盖链接的底色 */
  padding-left: 2px;  /* 避免省略号和链接文本重叠 */
}

在上面的代码中，我们将链接元素设置为display: inline-block，以便使链接的大小根据内容自适应。然后，我们使用::after伪元素添加省略号，并通过绝对定位将其放置在链接的末尾。最后，我们为::after伪元素设置一个白色的背景色，以覆盖链接的底色，并通过padding-left属性避免省略号与链接文本重叠。

使用tooltip显示完整的URL

除了截断URL并显示省略号，我们还可以使用tooltip（工具提示）来显示完整的URL。当用户将鼠标悬停在截断的链接上时，将显示一个tooltip，其中包含完整的URL。下面是一个示例：

a {
  position: relative;  /* 相对定位 */
  display: inline-block;  /* 行内块元素 */
  max-width: 200px;  /* 设置链接的最大宽度 */
  overflow: hidden;  /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 使用省略号截断文本 */
}

a:hover {
  overflow: visible;  /* 鼠标悬停时取消隐藏 */
}

a:hover::before {
  content: attr(href);  /* 显示链接的完整URL */
  position: absolute;  /* 绝对定位 */
  top: -20px;  /* 显示在链接上方 */
  background-color: black;  /* 背景色为黑色 */
  color: white;  /* 文字颜色为白色 */
  padding: 5px;  /* 增加内边距 */
}

上面的代码中，我们首先将链接元素设置为max-width: 200px，以限制链接的宽度。然后，当鼠标悬停在链接上时，我们使用:hover伪类将链接的overflow属性设置为visible，取消对溢出部分的隐藏。接下来，我们使用:hover::before伪元素在链接上方显示tooltip，并使用content属性显示完整的URL。最后，我们为tooltip设置一个黑色的背景色和白色的文字颜色，并增加内边距以提高显示效果。