溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

溢出文本text-overflow的使用及解決是怎樣的

發(fā)布時(shí)間：2021-10-08 10:29:55 來源：億速云 閱讀：143 作者：柒染 欄目：web開發(fā)

溢出文本text-overflow的使用及解決是怎樣的，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

今天，學(xué)習(xí) 溢出文本text-overflow的時(shí)候，犯了一個(gè)錯(cuò)誤，特此記錄。

text-overflow有兩個(gè)屬性值，clip和ellipsis。clip 表示不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切；ellipsis代表當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…）

需要注意的是，要想這兩個(gè)屬性起真正的作用，需要配合overflow:hidden;white-space:nowrap;使用。

overflow:hidden;代表著超出文本的部分不顯示

white-space:nowrap;代表強(qiáng)制文本在一行顯示。

我寫的例子代碼：

代碼如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>溢出文本text-overflow例子</title>
<meta name="Generator" content="EditPlus" charset="UTF-8">
</head>
<body>
<div >
不顯示省略標(biāo)記，而是簡(jiǎn)單的裁切
</div>
<div >
顯示省略標(biāo)記，不是簡(jiǎn)單的裁切
</div>
</body>
</html>


結(jié)果：

溢出文本text-overflow的使用及解決是怎樣的

如果overflow:hidden;不寫，結(jié)果是這樣的：

溢出文本text-overflow的使用及解決是怎樣的

如果white-space:nowrap;不寫，結(jié)果是這樣的：

溢出文本text-overflow的使用及解決是怎樣的

看完上述內(nèi)容，你們掌握溢出文本text-overflow的使用及解決是怎樣的的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手