1. Web
  2. CSS
  3. text-overflow

text-overflow

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

text-overflow CSS 属性设置如何向用户表示被隐藏的溢出内容。它可以被剪裁、显示省略号 (…) 或显示自定义字符串。

试一试

text-overflow: clip;

text-overflow: ellipsis;

text-overflow: "-";

text-overflow: "";

<section id="default-example">
  <div id="example-element-container">
    <p id="example-element">"Is there any tea on this spaceship?" he asked.</p>
  </div>
</section>

#example-element-container {
  width: 100%;
  max-width: 18em;
}

#example-element {
  line-height: 50px;
  border: 1px solid #c5c5c5;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  padding: 0 0.5em;
  text-align: left;
}

text-overflow 属性不会强制发生溢出。要使文本溢出其容器，您必须设置其他 CSS 属性：overflow 和 white-space。例如

css
overflow: hidden;
white-space: nowrap;

text-overflow 属性仅影响在其行内排列方向（而不是框底部溢出的文本，例如）溢出块容器元素的 content。

语法

css
text-overflow: clip;
text-overflow: ellipsis ellipsis;
text-overflow: ellipsis " [..]";

/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: revert;
text-overflow: revert-layer;
text-overflow: unset;

text-overflow 属性可以使用一个或两个值来指定。如果给定一个值，它指定行尾的溢出行为（对于从左到右的文本是右端，对于从右到左的文本是左端）。如果给定两个值，第一个指定行左端的溢出行为，第二个指定行右端的溢出行为。该属性接受一个关键字值（clip 或 ellipsis）或一个 <string> 值。

值

clip

此属性的默认值。此关键字值将在内容区域的限制处截断文本，因此截断可能发生在字符中间。要在字符之间进行剪裁，如果您的目标浏览器支持，您可以将 text-overflow 指定为空字符串：text-overflow: '';。

ellipsis

此关键字值将显示一个省略号 ('…', U+2026 HORIZONTAL ELLIPSIS) 来表示被剪裁的文本。省略号显示在内容区域内，减少了显示的文本量。如果没有足够的空间来显示省略号，它将被剪裁。

<string>

用于表示被剪裁文本的<string>。该字符串显示在内容区域内，缩短了显示的文本大小。如果没有足够的空间来显示字符串本身，它将被剪裁。

正式定义

初始值clip
应用于块容器元素
继承性否
计算值同指定值
动画类型离散

正式语法

text-overflow = 
  [ clip | ellipsis | <string> | fade | <fade()> ]{1,2}  

<fade()> = 
  fade( [ <length-percentage> ] )  

<length-percentage> = 
  <length>      |
  <percentage>

示例

单值语法

此示例显示了应用于段落的 text-overflow 的不同值，适用于从左到右和从右到左的文本。

HTML

html
<div class="ltr">
  <h2>Left to right text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

<div class="rtl">
  <h2>Right to left text</h2>
  <pre>clip</pre>
  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>ellipsis</pre>
  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
  <pre>" [..]"</pre>
  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

CSS

css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

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

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  text-overflow: " [..]";
}

body {
  display: flex;
  justify-content: space-around;
}

.ltr > p {
  direction: ltr;
}

.rtl > p {
  direction: rtl;
}

结果

双值语法

此示例显示了 text-overflow 的两值语法，您可以在其中为文本的开头和结尾定义不同的溢出行为。为了显示效果，我们必须滚动行，以便行的开头也被隐藏。

HTML

html
<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

CSS

css
p {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;

  /* Both of the following are required for text-overflow */
  white-space: nowrap;
  overflow: scroll;
}

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

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

.overflow-ellipsis-ellipsis {
  text-overflow: ellipsis ellipsis;
}

.overflow-ellipsis-string {
  text-overflow: ellipsis " [..]";
}

JavaScript

js
// Scroll each paragraph so the start is also hidden
const paras = document.querySelectorAll("p");

for (const para of paras) {
  para.scroll(100, 0);
}

结果

规范

规范
CSS 溢出模块第 3 级
# text-overflow
Scalable Vector Graphics (SVG) 2
# TextOverflowProperty

此接口的先前版本达到了候选推荐状态。由于需要删除一些未列为风险的功能，规范被降级到工作草案级别，这解释了为什么浏览器在未达到 CR 状态的情况下实现了此属性而没有前缀。

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.