此页面 已准备就绪

注意： WebPlatform 项目在 2012 年至 2015 年间由多个维护者支持，现已停止维护。该网站现在可在 github 上找到。

text-overflow

摘要

text-overflow 是一个 CSS 简写属性，用于确定如何向用户指示未显示的溢出内容。它可以被剪切、显示省略号（‘…’, U+2026 HORIZONTAL ELLIPSIS）或由 Web 作者定义的字符串。它涵盖了两个长属性：text-overflow-mode 和 text-overflow-ellipsis

概述表

初始值
未为简写属性定义
适用范围
块级和内联块元素
继承
否
媒体
视觉
计算值
参见各个属性
可动画
否
CSS 对象模型属性
<'text-overflow-mode'>

语法

  • text-overflow: clip
  • text-overflow: ellipsis
  • text-overflow: ellipsis-word

值

clip
默认值。简单地剪切内容，不为 text-overflow 显示省略号。
ellipsis
在最后一个完全适合一行的字母之后，为文本溢出显示省略号（…）。
ellipsis-word
在最后一个完全适合一行的单词之后，为文本溢出显示省略号（…）。

示例

以下示例展示了如何为 text-overflow 属性使用 ellipsis、ellipsis-word 和 clip 值。

<!-- example showing text-overflow shorthand property -->
<div class="overflowed overflowed-clip">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>
<div class="overflowed overflowed-ellipsis-word">
    <p>This is an example text showing nothing interesting but the truncated content via text-overflow shorthand property.</p>
</div>

查看实时示例

.overflowed > p{
    width: 10em;
    height: 5em;
    white-space: nowrap;
    overflow: hidden;
}

.overflowed-clip {
    text-overflow: clip;
}

.overflowed-ellipsis > p {
    text-overflow: ellipsis;
}

.overflowed-ellipsis-word > p {
    text-overflow: ellipsis-word;
}

查看实时示例

备注

备注

此属性仅适用于内联方向（水平方向，在正常的西方文本中）的文本溢出。内联溢出发生在行中的文本溢出可用宽度而没有断行机会时。为了强制发生溢出并应用省略号，作者必须将 nowrap 值应用于元素的 white-space 属性，或将内容包装在 <NOBR> 标签中。如果没有断行机会（例如，宽度太窄或有一个难以断开的长单词），则即使没有应用 nowrap 也可能发生溢出。为了呈现省略号，必须将此元素上的属性设置为除 visible（默认值）之外的其他值。最佳选择是将 overflow 设置为 hidden。将 overflow 设置为 scroll 或 auto 也可以工作，但会显示滚动条。可以选择省略号来选择隐藏的文本。选择时，省略号将消失并被布局区域内的文本替换。此属性为在动态 HTML (DHTML) 中构建省略号提供了一种高效的替代方案。由于省略号可能在单个页面上渲染多次，因此使用此属性可以显著提高性能。

语法

text-overflow: ellipsis | clip

参见

相关页面

署名