如何在隐藏溢出的 <span> 元素中显示省略号?

htmlweb developmentfront end technology更新于 2025/3/27 2:20:17

<span> 元素是一个没有语义含义的通用容器。它经常在网页开发中与 style 和 class 属性一起用于样式设置。它还可以用来为独立的文本跨度添加属性，例如 lang 或 title。

仅在没有其他语义元素可用时才应使用它。<span> 元素与 <div> 元素类似，但 <div> 元素是块级元素，而 <span> 元素是内联元素。语法如下 –

<span class="">Some Text</span>

CSS 简写属性

CSS 简写属性 overflow 指定元素溢出(即当元素内容过大而无法容纳其块格式化上下文时)的期望行为，无论是双向溢出。

语法

element {
  overflow:  visible | hidden | scroll | auto | inherit;
}

当元素的溢出设置为 hidden 时，内容会被裁剪以适应填充框(如有必要)。没有滚动条，也不支持用户滚动(通过拖动或使用滚轮)。由于内容可以通过编程方式滚动(例如，通过设置 scrollLeft 等属性的值或调用 scrollTo() 方法)，因此该元素仍然是一个滚动容器。

省略号 是一种标点符号，表示停顿或故意省略的内容。它由三个点或句号组成。它可以与具有隐藏溢出的元素一起使用，以实现清晰的布局和更好的截断效果。

在本文中，我们将介绍一种在具有隐藏溢出的 span 元素中显示省略号的方法。

使用 text-overflow 属性

当文本字符串溢出容器边界时，可能会扰乱整个布局。text-overflow 属性指定应如何向用户指示未显示的溢出内容。它可以被截断、使用省略号 (...) 或显示自定义字符串。

Text-overflow 需要以下两个属性:overflow: hidden 和 white-space: nowrap。

语法如下

text-overflow: clip|ellipsis|string|initial|inherit;

文本溢出值的省略号表示借助省略号或三个点/句号截断或剪切的文本。它出现在内容区域内，从而减少了显示的文本量。如果空间不足以显示省略号，则会将其截断。

示例

以下示例演示了如何在 span 元素中包含省略号，并将 text-overflow 的值设置为 ellipsis。我们将 <span> 元素的 display 属性设置为"inline-block"。宽度指定省略号的位置。我们还将 white-space 属性与"nowrap"值结合使用，以防止内容换行到下一行。

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Display Ellipsis in the span Element Having Hidden Overflow?
    </title>
    <style>
      span {
        background-color:peachpuff;
        color:darkslategrey;
        border:2px solid sienna;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        width:450px;
        height:20px;
        margin:10px;
        padding:2px 3px 4px 5px;
        display:inline-block;
      }
    </style>
  </head>
  <body>
    <h3>Something to think about</h3>
    <span>
        The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
    </span>
  </body>
</html>

示例

在此特定示例中，我们在第二行末尾的 <span> 标签中显示省略号。它是上一个示例的变体，添加了其他属性，例如 -webkit-line-clamp(允许将块容器的内容限制为指定的行数)和 -webkit-box-orient(决定元素是水平还是垂直排列其内容)。

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Display Ellipsis in the span Element Having Hidden Overflow?
    </title>
    <style>
      span {
        display: inline-block;
        background-color:lavenderblush;
        color:purple;
        font-weight:550;
        border: 3px solid thistle;
        margin:10px;
        padding: 2px 3px 4px 5px;
        width: 250px;
        height: 50px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-height: 1.50;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <h3>Something to think about</h3>
    <span>
        The minute you think you think you have the right to belittle others because you are better than them is the same minute you have proven that you are worse.
    </span>
  </body>
</html>

通过修改 -webkit-line-clamp 属性，我们可以在 span 标签中的任何后续行显示省略号。