text-overflow

这篇翻译不完整。请帮忙从英语翻译这篇文章

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...',U + 2026 HORIZONTAL ELLIPSIS)或显示一个自定义字符串。

 

text-overflow.png

一般在容器的极限处进行截断。如果想在裁剪处显示空白符,可以使用 ('').

这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致(举个反例:内容在盒子的下方溢出。此时就不会生效)。文本可能在以下情况下溢出:当其因为某种原因而无法换行(例子:设置了"white-space:nowrap"),或者一个单词因为太长而不能合理地被安置(fit)。

这个属性并不一定要求“溢出”事件发生;为了能让"text-overflow"能够生效,程序员们必须要在元素上添加几个额外的属性,比如"将overflow 设置为hidden"。

初始值clip
适用元素block container elements
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

Syntax

/* Overflow behavior at line end
   Right end if ltr, left end if rtl */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);

/* Overflow behavior at left end | at right end
   Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);

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

clip
这个关键字的意思是"在内容区域的极限处截断文本",因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断,你必须使用一个空字符串值 ('')(To truncate at the transition between two characters, the empty string value ('') must be used.)。此为默认值。
ellipsis
这个关键字的意思是“用一个省略号 ('…'U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号的容纳下,那么这个省略号也会被截断。
<string>
<string>用来表示被截断的文本。字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号的容纳下,那么这个字符串也会被截断。

Formal syntax

[ clip | ellipsis | <string> ]{1,2}

Examples

CSS content

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

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

.overflow-visible {
  white-space: initial;
}

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

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

.overflow-string {
  /* Not supported in most browsers, 
     see the 'Browser compatibility' section below */
  text-overflow: " [..]"; 
}

HTML content

<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Result

CSS value direction: ltr direction: rtl
Expected Result Live result Expected Result Live result
visible overflow 1234567890

1234567890

0987654321

1234567890

text-overflow: clip t-o_clip.png

123456

t-o_clip_rtl.png

1234567890

text-overflow: '' 12345

123456

54321

1234567890

text-overflow: ellipsis 1234…

1234567890

…4321

1234567890

text-overflow: '.' 1234.

1234567890

.4321

1234567890

text-overflow: clip clip 123456

1234567890

654321

1234567890

text-overflow: clip ellipsis 1234…

1234567890

6543…

1234567890

text-overflow: clip '.' 1234.

1234567890

6543.

1234567890

text-overflow: ellipsis clip …3456

1234567890

…4321

1234567890

text-overflow: ellipsis ellipsis …34…

1234567890

…43…

1234567890

text-overflow: ellipsis '.' …34.

1234567890

…43.

1234567890

text-overflow: ',' clip ,3456

1234567890

,4321

1234567890

text-overflow: ',' ellipsis ,34…

1234567890

,43…

1234567890

text-overflow: ',' '.' ,34.

1234567890

,53.

1234567890

Specifications

Specification Status Comment
CSS Basic User Interface Module Level 4
text-overflow
Working Draft Added the values <string> and fadeand the fade() function
CSS Basic User Interface Module Level 3
text-overflow
Candidate Recommendation Initial definition

此接口的较早版本曾经被纳入候选名单。 但由于需要对某些尚未列出的风险点进行删除工作,因此该规范已降级到“工作草案”。所以说浏览器无前缀地实现此属性,但其却不在CR状态。

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 (312.3) (Yes) 7.0 (7.0)[1] 6.0[2] 9-o[3]
11.0
1.3 (312.3)
Two-value syntax 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
String value 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
fade 未实现 未实现 未实现 未实现 未实现 未实现
fade() 未实现 未实现 未实现 未实现 未实现 未实现
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 7.0 (7.0) ? (Yes) (Yes)
Two-value syntax 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
String value 未实现 未实现 9.0 (9.0) 未实现 未实现 未实现
fade 未实现 未实现 未实现 未实现 未实现 未实现
fade() 未实现 未实现 未实现 未实现 未实现 未实现

[1] Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), handling of text-overflow on blocks with inline overflow on both horizontal sides has been corrected; previously, if you specified only one value (such as text-overflow:ellipsis;), ellipsing was happening on both sides instead of just the end edge based on the block's text direction.

[2] Internet Explorer 8 introduced the prefixed version, -ms-text-overflow, synonymous withtext-overflow. Do not use this prefixed version.

[3] Opera 9 and 10 require the prefixed version, -o-text-overflow.

See also

(69.2017.4.4,多多包涵)

文档标签和贡献者

标签: 
 最后编辑者: xgqfrms-GitHub,