怎么使用css text-overflow屬性

發(fā)布時間：2020-07-10 13:52:05 來源：億速云閱讀：151 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么使用css text-overflow屬性，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

css text-overflow屬性用于指定當(dāng)文本溢出包含它的元素時，應(yīng)該發(fā)生什么事情。所有主流瀏覽器都支持 text-overflow 屬性。

css text-overflow屬性怎么用？

text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。

語法：

text-overflow: clip|ellipsis|string;

屬性值：

●　clip：修剪文本。

●　ellipsis：顯示省略符號來代表被修剪的文本。

●　string：使用給定的字符串來代表被修剪的文本。

注釋：所有主流瀏覽器都支持 text-overflow 屬性。

css text-overflow屬性示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>
<p>以下 div 容器內(nèi)的文本無法完全顯示，可以看到它被裁剪了。</p>
<p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<p>div 使用 &quot;text-overflow:clip&quot;:</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
<p>div 使用自定義字符串 &quot;text-overflow: &gt;&gt;&quot;(只在 Firefox 瀏覽器下有效):</p>
<div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div>
</body>
</html>

效果圖：

怎么使用css text-overflow屬性

上述內(nèi)容就是怎么使用css text-overflow屬性，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

怎么使用css text-overflow屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽