如何使用 CSS 截断带有省略号的长 HTML 标题？

将省略号插入 HTML 标签以获得宽内容

现代网页设计采用弹性布局来适应不同的浏览器窗口大小。这种灵活性给可变长度的元素（例如标题）带来了挑战。在标题变得比窗口宽的情况下，它们可能会换行成多行，从而损害所需的布局。

为了优雅地解决这个问题，让我们探索一种利用 CSS 将标题截断为单行的解决方案如果内容超过可用宽度，则添加省略号 (...)。

基于 CSS 的解决方案

以下基于 CSS 的解决方案在现代浏览器中有效，因为它利用了文本溢出属性：

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

用法

要应用此解决方案，只需将省略号类添加到标题中：

<code class="html"><h2 id="This-is-a-potentially-long-headline">This is a potentially long headline</h2></code>

浏览器兼容性

此纯 CSS 解决方案适用于除 Firefox 6.0 之外的所有主要现代浏览器。对于 Firefox 6.0 或更早版本，请考虑支持多行换行，如本替代解决方案中所述。

以上是如何使用 CSS 截断带有省略号的长 HTML 标题？的详细内容。更多信息请关注PHP中文网其他相关文章！