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.