如何在溢出的跨度中显示省略号？

Mary-Kate Olsen

发布： 2024-10-27 12:26:30

原创

433 人浏览过

How Can I Display an Ellipsis in an Overflowing Span?

在溢出跨度中显示省略号

要在隐藏溢出的跨度中显示点（“...”），您可以使用text-overflow：省略号属性。它会截断溢出的文本并显示省略号。

以下是实现它的方法：

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

登录后复制

在此代码段中：

display: inline-block允许跨度占用内联空间，同时仍然像块一样。
宽度：180px将跨度的宽度设置为180像素。
空白：nowrap防止文本换行
overflow: hide !important 确保内容在溢出 span 宽度时隐藏。
text-overflow: ellipsis 截断文本并在内容溢出时显示省略号.

通过组合这些属性，您可以在范围中显示省略号，表示还有更多内容隐藏在视图中。

以上是如何在溢出的跨度中显示省略号？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

上一篇：如何在带有主题标签的 CSS 和 jQuery 选择器中使用“#”？下一篇：如何在 CSS 中使用 :after 和 :hover 动态设置列表项的样式？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章