CSS3 文本溢出text-overflow

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-19

text-overflow屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情，語法如下:

text-overflow: clip [ ellipsis | string :

text-overflow屬性的值可以是以下幾種：

?clip：修剪文本。

?ellipsis：顯示省略符號(hào)來代表被修剪的文本。

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

下面我們通過一個(gè)實(shí)例了解text-overflow屬性。

【例題】使用text-overflow屬性

代碼如下：

<!DOCTYPE html>

<html>

<head>

<style>

div.test{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

}

div.test:hover{

text-overflow:inherit;

overflow:visible;

}

</style>

</head>

<body>

<p>如果您把光標(biāo)移動(dòng)到下面兩個(gè) div 上，就能夠看到全部文本。</p>

<p>這個(gè) div 使用 "text-overflow:ellipsis" ：</p>

<p>這個(gè) div 使用 "text-overflow:clip"：</p>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)