CSS text-overflow屬性用法及代碼示例

此屬性指定溢出文本的表示形式，用戶不可見。它向用戶發出有關不可見內容的信號。此屬性可幫助我們決定是否應剪切文本、顯示一些點(省略號)或顯示自定義字符串。

此屬性本身不起作用。我們必須使用 white-space:nowrap;和溢出：隱藏；有了這個屬性

用法

text-overflow:clip | ellipsis | string | initial | inherit;

屬性值

clip:它是剪切溢出文本的默認值。它在內容區域的限製處截斷文本，以便它可以截斷字符中間的文本。

ellipsis:此值顯示一個省略號 (?) 或三個點以顯示剪切的文本。它顯示在該區域內，減少了文本量。

string:它用於使用程序員選擇的字符串向用戶表示剪切的文本。它僅適用於 Firefox 瀏覽器。

initial:它將屬性設置為其默認值。

inherit:它從其父元素繼承屬性。

示例

<!DOCTYPE html>
<html>
<head>
<style>
div{
white-space:nowrap;
height:30px;
width:250px;
overflow:hidden;
border:2px solid black;
font-size:25px;

}
.jtp{
text-overflow:clip;
}
.jtp1 {
text-overflow:ellipsis;
}

h2{
color:blue;
}
div:hover {
overflow:visible;
}
p{
font-size:25px;
font-weight:bold;
color:red;
}
</style>
</head>
<center>
<body>
<p> Hover over the bordered text to see the full content. </p>

<h2>
text-overflow:clip;
</h2>

<div class="jtp">
Welcome to the javaTpoint.com
</div>
<h2>
text-overflow:ellipsis;
</h2>

<div class="jtp1">
Welcome to the javaTpoint.com
</div>
</center>
</body>
</html>

輸出

示例

在此示例中，我們使用省略號並繼承 text-overflow 屬性的值。我們在一個 div 元素上應用了 text-overflow:ellipsis；在 div 中，有一個段落元素，我們在該元素上應用了 text-overflow:inherit；財產。

我們可以通過將鼠標懸停在元素上來查看完整內容。當我們懸停段落元素的內容時，div 元素的內容將自動可見，因為段落元素是 div 元素的子元素。

<html>

<head>
<title>
CSS text-overflow Property
</title>
<style>
div {
width:250px;
font-size:20px;
white-space:nowrap;
border:2px solid red;
overflow:hidden;
text-overflow:ellipsis;
}
h1, h4{
color:red;
}
p{
white-space:nowrap;
overflow:hidden;
text-overflow:inherit;
}
div:hover{
overflow:visible;
}
p:hover{
overflow:visible;
}
</style>
</head>

<body>
<h1> Hover over the text to see the full content </h1>
<div>
<h4> text-overflow:ellipsis; </h4>
Welcome to the javaTpoint.com
<h4> text-overflow:inherit; </h4>
<p>
This paragraph inherited the value from its parent div element.
</p>
</div>
</body>

</html>

輸出

將鼠標移到元素上時，輸出將是 -

相關用法

注：本文由純淨天空篩選整理自 CSS text-overflow property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。