将省略号插入 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 class="ellipsis">This is a potentially long headline</h2></code>
浏览器兼容性
此纯 CSS 解决方案适用于除 Firefox 6.0 之外的所有主要现代浏览器。对于 Firefox 6.0 或更早版本,请考虑支持多行换行,如本替代解决方案中所述。
以上是如何使用 CSS 截断带有省略号的长 HTML 标题?的详细内容。更多信息请关注PHP中文网其他相关文章!