From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/text-overflow/index.html | 444 +++++++++++++++++++++++++++ 1 file changed, 444 insertions(+) create mode 100644 files/zh-cn/web/css/text-overflow/index.html (limited to 'files/zh-cn/web/css/text-overflow') diff --git a/files/zh-cn/web/css/text-overflow/index.html b/files/zh-cn/web/css/text-overflow/index.html new file mode 100644 index 0000000000..d92f8d3766 --- /dev/null +++ b/files/zh-cn/web/css/text-overflow/index.html @@ -0,0 +1,444 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS 属性 + - text-overflow +translation_of: Web/CSS/text-overflow +--- +

{{ CSSRef() }}

+ +

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

+ + + +

text-overflow.png

+ +

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

+ +

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

+ +

这个属性并不会强制“溢出”事件的发生，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将{{cssxref("overflow")}} 设置为hidden"。

+ +

{{cssinfo}}

+ +

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
+
此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 text-overflow 属性的值。
+
ellipsis
+
这个关键字的意思是“用一个省略号 ('…', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
+
<string> {{ experimental_inline() }}
+
{{cssxref("<string>")}}用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。
+
+ +

Formal syntax

+ +
{{csssyntax("text-overflow")}}
+ +

示例

+ +

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

+ +

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS valuedirection: ltrdirection: rtl
Expected ResultLive resultExpected ResultLive result
visible overflow1234567890 +

1234567890

+ 		0987654321 +

1234567890

+
text-overflow: clipt-o_clip.png +

123456

+ 		t-o_clip_rtl.png +

1234567890

+
text-overflow: ''12345 +

123456

+ 		54321 +

1234567890

+
text-overflow: ellipsis1234… +

1234567890

+ 		…4321 +

1234567890

+
text-overflow: '.'1234. +

1234567890

+ 		.4321 +

1234567890

+
text-overflow: clip clip123456 +

1234567890

+ 		654321 +

1234567890

+
text-overflow: clip ellipsis1234… +

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

+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS4 UI')}}Added the values <string> and fadeand the fade() function
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Initial definition
+ +

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

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 (312.3){{CompatVersionUnknown}}{{CompatGeckoDesktop("7.0")}}[1]6.0[2]9{{property_prefix("-o")}}[3]
+ 11.0		1.3 (312.3)
Two-value syntax {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
String value {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade{{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade(){{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Two-value syntax {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
String value {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade{{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade(){{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] 从 Gecko 10.0 {{geckoRelease("10.0")}} 起，修正了text-overflow属性在行内溢出的块级元素两端都溢出的显示效果，早前的版本如果仅仅使用一个属性(比如说text-overflow:ellipsis;)，可能会导致块级元素文本两端都会变为省略号，而不是仅仅期望的仅仅在文本末尾显示省略号。

+ +

[2] IE 8 提供了带有浏览器前缀的版本， -ms-text-overflow，和text-overflow作用相同。但是并不推荐这样使用。

+ +

[3] Opera 9 和 10 要求带有浏览器前缀 -o-text-overflow。

+ +

另见

+ + + +

(69.2017.4.4,多多包涵)

-- cgit v1.2.3-54-g00ecf