text-overflow

語法:

text-overflow:clip | ellipsis

預設值clip

適用於:塊級容器元素

繼承性:無

動畫性:否

計算值:指定值

取值:

clip:
當內聯內容溢出塊容器時,將溢出部分裁切掉。
ellipsis:
當內聯內容溢出塊容器時,將溢出部分替換為(...)。

說明:

當塊容器 <' overflow '> 為非visible時,定義內聯內容溢出其塊容器是否截斷或者增加(...)及自訂字符
  • 要使得 <' text-overflow '> 屬性生效,塊容器必須顯式定義 <' overflow '> 為非visible值,同時顯式或者隱式的定義 <' width '> 為非auto值, <' white-space '> 為nowrap值。

    用程式碼來解釋這段話:

    case 1:

    <style> .demo p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;} </style> <div class="demo"> <p>這是一句非常非常長的話,被用來做text-overflow屬性測試。</p> </div>

    case 1,我們將text-overflow生效必備的3個屬性: <' overflow '> , <' width '> 和 <' white-space '> 都直接定義在了內聯內容的父級塊容器上

    case 2:

    <style> .demo{width:200px;white-space:nowrap;} .demo p{overflow:hidden;text-overflow:ellipsis;} </style> <div class="demo"> <p>這是一句非常非常長的話,被用來做text-overflow屬性測試。</p> </div>

    case 2,我們將 <' width '> 和 <' white-space '> 定義在了更外層的塊容器上,但case 1和case 2的效果是一樣的。因為這2個屬性可以被繼承

  • 對應的腳本特性為textOverflow

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0+ 2.0-6.0 4.0+ 6.0+ 15.0+ 6.0+ 2.1+ 18.0+
7.0+

示例: