我們?cè)谧鼍W(wǎng)站時(shí)，往往由于某個(gè)區(qū)塊的寬度有限，我們的文字過(guò)多就會(huì)超過(guò)這個(gè)寬度。瀏覽器默認(rèn)情況下是進(jìn)行換行顯示，但這會(huì)導(dǎo)航網(wǎng)站版面錯(cuò)亂，這在門(mén)戶(hù)網(wǎng)站制作中經(jīng)常遇到。

解決文字過(guò)多超出的問(wèn)題的方法就是使用CSS控制文字超出部分隱藏，隱藏部分顯示省略號(hào)。（相關(guān)教程：CSS視頻教程）效果如下圖：

實(shí)現(xiàn)HTML+CSS文字超出部分顯示省略號(hào)的方法很簡(jiǎn)單，只需要對(duì)這一個(gè)區(qū)塊添加以下的CSS樣式即可。（代碼中的div-name換成自己的DIV名）

.div-name {

width: 100%;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

舉例：

<style>

.bz li {

?   width: 320px;

?   overflow: hidden;

?   text-overflow: ellipsis;

?   white-space: nowrap;}

</style>



<ul class="bz">

<li><a href="https://www.xuewangzhan.com/buzou/9190.html" target="_blank">手機(jī)網(wǎng)站制作流程，怎么做手機(jī)網(wǎng)站教程/詳細(xì)步驟</a></li>

</ul>

上面的代碼是通過(guò)CSS控制一行文字超出顯示省略號(hào)，如果想控制多行文字超出隱藏加省略號(hào)，可以參考：CSS控制多行文字超出隱藏加省略號(hào)

標(biāo)簽： 代碼 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。