可能是最全的 “文本溢出截?cái)嗍÷浴?方案合集

前言

在我們的日常開發(fā)工作中，文本溢出截?cái)嗍÷允呛艹Ｒ姷囊环N需考慮的業(yè)務(wù)場景細(xì)節(jié)。看上去 “稀松平常” ，但在實(shí)現(xiàn)上卻有不同的區(qū)分，是單行截?cái)噙€是多行截?cái)啵?/span>多行的截?cái)嗯袛嗍腔谛袛?shù)還是基于高度？這些問題之下，都有哪些實(shí)現(xiàn)方案？他們之間的差異性和場景適應(yīng)性又是如何？凡事就怕較真，較真必有成長。本文試圖通過編碼實(shí)踐，給出一些答案。

先來點(diǎn)基礎(chǔ)的，單行文本溢出省略

核心 CSS 語句 

• overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內(nèi)容）

• white-space: nowrap；（設(shè)置文字在一行顯示，不能換行）

• text-overflow: ellipsis；（規(guī)定當(dāng)文本溢出時(shí)，顯示省略符號(hào)來代表被修剪的文本）

優(yōu)點(diǎn)

• 無兼容問題

• 響應(yīng)式截?cái)?/p>

• 文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

• 省略號(hào)位置顯示剛好

短板

• 只支持單行文本截?cái)?/span>

適用場景

• 適用于單行文本溢出顯示省略號(hào)的情況

Demo

<del id="afajh"><form id="afajh"></form></del>


<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>