CSS Ellipsis

定义和目的

CSS 省略号是一种 text-overflow 属性，它允许开发人员截断溢出的文本并显示省略号 (...)，以表示内容已被截断。省略号是三点序列，通常表示没有额外文本。CSS 省略号的主要目的是处理文本显示空间受限的情况，防止内容破坏布局或溢出其容器。

CSS 省略号如何用于截断文本的解释

当文本溢出其容器且没有足够的空间显示完整内容时，CSS 省略号可以在可见文本后显示省略号。这种截断方法经常用于以下情况：

• 单行文本：当单行文本（例如标题或标签）的长度超过容器的宽度时，CSS 省略号可确保文本末尾以省略号截断，从而防止布局破坏或创建水平滚动。
• 多行文本：当多行文本（例如段落内容或描述）超过容器的高度时，可以使用 CSS 省略号来截断文本并显示省略号，表明当前显示的内容之外还有更多内容。

CSS 省略号在保持整洁美观的布局中的重要性

CSS 省略号对于保持整洁美观的布局至关重要，尤其是在文本显示空间有限的情况下。其重要性体现在以下几个方面：

• 防止文本溢出：当文本空间有限时，省略号可确保文本不会超出其容器，避免布局中断或与其他元素意外重叠。
• 关注关键信息：通过使用省略号截断长文本，观看者可以专注于消息最重要的部分。它作为一种视觉指示器，表明更多信息可供访问，促使用户在想查看更多内容时与材料进行交互。
• 提高可读性：通过在截断时显示省略号，用户会被告知文本已被截断，从而防止因信息不完整而造成的混淆或误解。
• 响应式设计支持：CSS 省略号在响应式网页设计中特别有用，因为在小显示器或狭窄容器中，空间受限是常见的。它可确保文本在各种设备上保持易于管理和清晰可读。

实现 CSS 省略号

实现省略号所涉及的 CSS 属性概述

主要使用三个 CSS 属性来实现 CSS 省略号并截断溢出其容器的文本

White-space：此属性控制如何处理文本内的空白（空格、制表符和换行符）。它会影响文本在容器内的换行和断裂方式。

值：normal、nowrap、pre、pre-wrap、pre-line。

Overflow：此属性控制超出容器边界的材料的显示方式。它决定是显示滚动条、裁剪内容还是隐藏内容。

值：visible、hidden、scroll、auto。

Text-overflow：此属性在处理文本溢出时，确定文本截断时如何显示省略号。

值：clip、ellipsis。

单独使用每个属性以及组合使用以创建省略号效果的示例

示例：使用 text-overflow 实现省略号。

示例：使用 white-space 和 overflow。

示例：组合所有属性

在第三种情况下，我们整合了所有三个功能。我们可以通过在容器的 p 元素内使用嵌套的 span 元素，专门将 text-overflow: ellipsis 属性应用于 span，从而使省略号效果仅应用于容器内文本的特定部分。当在特定元素内截断文本，同时保持容器内其他材料不变时，此技术非常有用。

处理多行文本

使用 CSS 省略号处理多行文本比单行文本更困难。有一些技术可以使用 CSS 在多行文本上创建省略号效果。

其中一种流行的方法是针对基于 WebKit 的浏览器（例如 Chrome 和 Safari）使用 -webkit-line-clamp，并结合 display: -webkit-box 和 text-overflow: ellipsis。

当内容超出容器容量时，此技术允许指定行数的文本带有省略号。

示例 1：使用 display: -webkit-box 实现多行省略号（跨浏览器方法）

在此示例中，我们将 .container 元素的 max-height 设置为大约三行文本（假设每行 1.5 厘米）。我们通过使用 display: -webkit-box、-webkit-box-orient 和 text-overflow: ellipsis，为其他浏览器实现类似的多行省略号效果，但结果可能大相径庭。

注意：截断前显示的行数可能会因字体、行高和浏览器渲染而异。

示例 2：使用 -webkit-line-clamp 实现多行省略号

在上面的示例中，.container 元素中的 p 元素包含多行文本。我们通过使用 -webkit-line-clamp 和 -webkit-box-orient 将显示限制为三行文本，并应用 overflow: hidden 来隐藏超出指定行的任何信息。如果存在更多材料，这将产生多行省略号效果，在第三行的末尾显示省略号 (...)。

注意：请记住，-webkit-line-clamp 是一个“专有属性”，仅在支持 WebKit 的浏览器中有效。

自定义省略号样式

省略号可以在 CSS 中以不同方式设置样式，这使设计人员能够创建更具美感和统一的设计。开发人员可以通过更改省略号字符、颜色和间距等变量来更好地适应网站或应用程序的整体主题。

以下是一些省略号样式自定义选项

示例 1：更改省略号的颜色

使省略号的颜色符合您网站的配色方案。

示例 2：更改省略号中的字符

三个点通常用作标准省略号符号 (...)。为了更好地适应您网站的排版和外观，您可以将其替换为另一个字符，例如“...”或 Unicode 省略号 (...)。

示例 3：在省略号周围添加间距

为了改善省略号的视觉外观并将其与文本区分开来，在其周围添加填充或边距。

示例 4：使用伪元素自定义省略号

通过使用::before 或::after 等伪元素设置省略号样式，可以实现更大的视觉自由度。

注意：始终在自定义、可用性和可读性之间取得平衡。