aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/text-overflow/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/css/text-overflow/index.html')
-rw-r--r--files/zh-cn/web/css/text-overflow/index.html444
1 files changed, 444 insertions, 0 deletions
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
+---
+<p>{{ CSSRef() }}</p>
+
+<p><strong><code>text-overflow</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。</p>
+
+
+
+<p><img alt="text-overflow.png" class="default internal" src="/@api/deki/files/5846/=text-overflow.png"></p>
+
+<p>一般在容器的极限处进行截断。如果想在裁剪处显示空白符，可以使用 (<code>''</code>).</p>
+
+<p>这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了"white-space:nowrap")，或者一个单词因为太长而不能合理地被安置(fit)。</p>
+
+<p>这个属性并不会强制“溢出”事件的发生，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将{{cssxref("overflow")}} 设置为hidden"。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="notranslate"><code>/* 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;</code></pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>clip</code></dt>
+ <dd><strong>此为默认值。</strong>这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 <code>text-overflow: ''</code>，为了能在两个字符过渡处截断，你可以使用一个空字符串值 (<code>''</code>) 作为 <code>text-overflow</code> 属性的值。</dd>
+ <dt><code>ellipsis</code></dt>
+ <dd>这个关键字的意思是“用一个省略号 (<code>'…'</code>, <code>U+2026 HORIZONTAL ELLIPSIS</code>)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。</dd>
+ <dt><code>&lt;string&gt;</code> {{ experimental_inline() }}</dt>
+ <dd>{{cssxref("&lt;string&gt;")}}用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax("text-overflow")}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="notranslate"><code>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: " [..]";
+}</code></pre>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="notranslate"><code>&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;</code></pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
+
+<table>
+ <thead>
+ <tr>
+ <th colspan="1" rowspan="2" scope="col">CSS value</th>
+ <th colspan="2" rowspan="1" scope="col"><code>direction: ltr</code></th>
+ <th colspan="2" rowspan="1" scope="col"><code>direction: rtl</code></th>
+ </tr>
+ <tr>
+ <th scope="col">Expected Result</th>
+ <th scope="col">Live result</th>
+ <th scope="col">Expected Result</th>
+ <th scope="col">Live result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><em>visible overflow</em></td>
+ <td>1234567890</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>0987654321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: clip</code></td>
+ <td><img alt="t-o_clip.png" src="https://developer.mozilla.org/@api/deki/files/6056/=t-o_clip.png"></td>
+ <td>
+ <p>123456</p>
+ </td>
+ <td><img alt="t-o_clip_rtl.png" src="https://developer.mozilla.org/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ''</code></td>
+ <td>12345</td>
+ <td>
+ <p>123456</p>
+ </td>
+ <td>54321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ellipsis</code></td>
+ <td>1234…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>…4321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: '.'</code></td>
+ <td>1234.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>.4321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: clip clip</code></td>
+ <td>123456</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>654321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: clip ellipsis</code></td>
+ <td>1234…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>6543…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: clip '.'</code></td>
+ <td>1234.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>6543.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ellipsis clip</code></td>
+ <td>…3456</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>…4321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ellipsis ellipsis</code></td>
+ <td>…34…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>…43…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ellipsis '.'</code></td>
+ <td>…34.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>…43.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ',' clip</code></td>
+ <td>,3456</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>,4321</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ',' ellipsis</code></td>
+ <td>,34…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>,43…</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ <tr>
+ <td><code>text-overflow: ',' '.'</code></td>
+ <td>,34.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ <td>,53.</td>
+ <td>
+ <p>1234567890</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="说明">说明</h2>
+
+<table>
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
+ <td>{{Spec2('CSS4 UI')}}</td>
+ <td>Added the values <code>&lt;string&gt;</code> and <code>fade</code>and the <code>fade()</code> function</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td>
+ <td>{{Spec2('CSS3 UI')}}</td>
+ <td>Initial definition</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>此接口的较早版本曾经被纳入候选名单。 但由于需要对某些尚未列出的风险点进行删除工作，因此该规范已降级到“工作草案”。所以说浏览器无前缀地实现此属性，但其却不在CR状态。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Edge</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>1.0 (312.3)</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoDesktop("7.0")}}<sup>[1]</sup></td>
+ <td>6.0<sup>[2]</sup></td>
+ <td>9{{property_prefix("-o")}}<sup>[3]</sup><br>
+ 11.0</td>
+ <td>1.3 (312.3)</td>
+ </tr>
+ <tr>
+ <td>Two-value syntax {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("9.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>String value {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoDesktop("9.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>fade</code>{{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>fade()</code>{{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Edge</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatGeckoMobile("7.0")}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ <tr>
+ <td>Two-value syntax {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile("9.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td>String value {{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatGeckoMobile("9.0")}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>fade</code>{{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ <tr>
+ <td><code>fade()</code>{{experimental_inline}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ <td>{{CompatNo}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>[1] 从 Gecko 10.0 {{geckoRelease("10.0")}} 起，修正了text-overflow属性在行内溢出的块级元素两端都溢出的显示效果，早前的版本如果仅仅使用一个属性(比如说<code>text-overflow:ellipsis;</code>)，可能会导致块级元素文本两端都会变为省略号，而不是仅仅期望的仅仅在文本末尾显示省略号。</p>
+
+<p>[2] IE 8 提供了带有浏览器前缀的版本， <code>-ms-text-overflow</code>，和text-overflow作用相同。但是并不推荐这样使用。</p>
+
+<p>[3] Opera 9 和 10 要求带有浏览器前缀 <code>-o-text-overflow</code>。</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
+</ul>
+
+<p>(69.2017.4.4,多多包涵)</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-07 09:44:01 +0000