HTML | DOM 样式 textOverflow 属性(1)

📌 相关文章

📜 HTML | DOM 样式 textOverflow 属性(1)

📅 最后修改于: 2023-12-03 14:41:50.193000 🧑 作者: Mango

HTML | DOM 样式 textOverflow 属性

textOverflow 属性指定当文本溢出其包含元素时应该发生什么。当元素内部的文本超出其容器时，可以使用 textOverflow 属性来定义是否应该截断文本并以省略号显示。

语法

<style>
   p {
       text-overflow: ellipsis;
   }
</style>

属性值

以下列表提供了一些 textOverflow 属性的常用值：

clip：默认值。内容会被修剪，并且剩余部分不可见。
ellipsis：修剪文本并以省略号表示被修剪的文本。
string：修剪文本并用自定义字符串替换被修剪的文本。字符串必须在 content 属性中指定。

实例

<style>
  p {
    white-space: nowrap;
    width: 210px;
    background-color: #f2f2f2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<body>
  <p>这是一个非常长的文本字符串，可能会超出其容器。可以使用 textOverflow 属性来截断文本。</p>
</body>

注意事项

只针对 block 定位的元素或 inline-block 元素可用
当浏览器未能理解 textOverflow 属性时，文本不会被修剪。
文本必须以 nowrap 的方式显示。如果文本被换行了，textOverflow 属性将无效。

以上就是对 textOverflow 属性的介绍。使用 textOverflow 可以极大地提高文本显示的美观性和易读性。希望这篇文章可以帮助程序员更好地理解和应用 textOverflow 属性。