text-overflow
**text-overflow
** CSS 属性设置如何向用户显示隐藏的溢出内容。它可以剪裁、显示省略号 ('…
') 或显示自定义字符串。
试一试
text-overflow
属性不会强制出现溢出。要使文本溢出其容器,您必须设置其他 CSS 属性:overflow
和 white-space
。例如
overflow: hidden;
white-space: nowrap;
text-overflow
属性仅影响在其内联前进方向(例如,不是在盒子底部溢出的文本)上溢出块级容器元素的内容。
语法
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>
。该字符串显示在 内容区域 内,缩短显示的文本大小。如果没有足够的空间显示字符串本身,则将其剪裁。
正式定义
正式语法
text-overflow =
clip |
ellipsis
示例
单值语法
此示例显示了应用于段落的 text-overflow
的不同值,适用于从左到右和从右到左的文本。
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
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
<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
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
// 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 |
此接口的先前版本已达到候选推荐状态。由于一些未列出的高风险特性需要删除,因此规范被降级到工作草案级别,解释了为什么浏览器在未达到 CR 状态的情况下未带前缀地实现了此属性。
浏览器兼容性
BCD 表仅在浏览器中加载
另请参阅
- 相关的 CSS 属性:
overflow
,white-space
- 控制单词换行的 CSS 属性:
overflow-wrap
,word-break