text-overflow

important note重要訊息:

本文件為初步資訊而且可能隨時變更。

設定值,該值指出是否要產生省略符號 (...) 來表示文字溢位。

語法

{ text-overflow:iTextOverflow}

可能的值

iTextOverflow

指定值的字串,該值指出當文字內容超出指定之版面配置區域時,是否會顯示省略符號 (...)。

ellipsis

當文字溢位時顯示省略符號 (...)。

clip

預設值。當文字溢位時只會裁剪內容,不會顯示省略符號。

string

顯示 string 而非省略符號來表示已裁剪的文字。

此屬性的預設值為 clip 。這不是繼承屬性。

備註

此屬性只適用於內嵌方向 (在標準西方文字中為水平方向) 的文字溢位。當某一行的文字超出可用寬度且無法分行時,就會發生內嵌溢位。若要強制溢位並套用省略符號,作者必須將 nowrap 值套用到元素的 white-space 屬性,或是將內容放在 <nobr> 標籤中。如果無法分行 (例如寬度較窄,或是有較長的字無法適當分行),則可能會在未套用 nowrap 時發生溢位。

元素的這個屬性必須設定為預設值 visible 以外的值,才會產生省略符號。最好的選擇是將 overflow 設定為 hidden 。將 overflow 設成 scrollauto 也可以,但是會顯示捲軸。

您可透過選取省略符號來選取隱藏文字。選取後,省略符號將會消失,並以文字 (在版面配置區域的範圍內) 來取代。

此屬性提供了一種有效率的替代方式,可作為在動態 HTML (DHTML) 中建置省略符號以外的另一個選擇。單一頁面可能會多次重複產生省略符號,因此使用這個屬性可大幅提高效能。

範例

下列範例顯示如何使用 text-overflow 屬性的 ellipsisclip 兩個值。它也示範如何藉由將 overflow 設成 visible 來取消 text-overflow 的效果。

<html>
<body>
<div style="text-decoration: underline; color: #7F0000;
font: bold 20px Arial; font-weight: bold">
Effect of CSS property <em>text-overflow</em></div> 
<div style ="font: bold 16px Arial; color: #7F0000; font-weight: bold">
Each box (div element) below contains the following text:</div>
<div>We hold these truths to be self-evident, 
that all people are created equal.</div>
<div style="font: bold 16px Arial; color: #7F0000; font-weight: bold">
Note how the style settings effect the rendering of the text</div>

<div style ="position: relative; height: 75px; top: 10px;">
<div style ="position: absolute; left: 10px;
            font: bold 16px Arial, sans-serif; color: blue; ">
style ="text-overflow : clip; overflow : hidden"
<div style ="position: absolute; left: 0px; top: 18px; color: black;
            width: 120px; height: 50px; border: 1px solid blue;
            font: 14px Times New Roman, serif; overflow: hidden;
            text-overflow: clip">
<nobr>We hold these truths to be self-evident, 
that all people are created equal.</nobr>
</div>
</div>

<div style ="position: relative; height: 75px; top: 70">
<div style ="position: absolute; left: 10px;
            font: bold 16px Arial, sans-serif; color: blue; ">
style ="text-overflow : ellipsis; overflow : hidden"
<div style ="position: absolute; left: 0px; top: 18px; color: black;
            width: 120px; height: 50px; border: 1px solid blue;
            font: 14px Times New Roman, serif; overflow: hidden;
            text-overflow: ellipsis;">
<nobr>We hold these truths to be self-evident, 
that all people are created equal.</nobr>
</div>
</div>

<div style ="position: relative; height: 75px; top: 70px;">
<div style ="position: absolute; left: 10px;
            font: bold 16px Arial, sans-serif; color: blue; ">
style ="text-overflow : ellipsis; overflow : visible"
<div style ="position: absolute; left: 0px; top: 18px; color: black;
            width: 120px; height: 50px; border: 1px solid blue;
            font: 14px Times New Roman, serif; overflow: visible;
            text-overflow: ellipsis;">
<nobr>We hold these truths to be self-evident, 
that all people are created equal.</nobr>
</div>
</div>
</body >
</html>

標準資訊

您可以在 CSS Selectors Level 3 (CSS 選取器層級 3) Gg721774.xtlink_newWindow(zh-tw,Expression.40).png 找到此屬性的定義。

適用範圍

blockquote, body, button, center, dd, dfn, div, dl, dt, fieldset, form, hn, hr, li, ol, p, table, td, th, tr, ul, xmp

另請參閱

概念

padding
margin
vertical-align