CSS3 文本溢出text-overflow

提問人：劉團圓發(fā)布時間：2020-11-19

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

text-overflow: clip [ ellipsis | string :

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

?clip：修剪文本。

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

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

下面我們通過一個實例了解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>如果您把光標移動到下面兩個 div 上，就能夠看到全部文本。</p>

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

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

</body>

</html>

相關視頻回答

回復(0)