HTMLayout設(shè)計(jì)UI基礎(chǔ)篇:溢出顯示省略號(hào)
---在當(dāng)今的客戶端軟件中,越來(lái)越多的人開(kāi)始使用HTMLayout布局來(lái)實(shí)現(xiàn)客戶端顯示效果。在展示交互信息時(shí),內(nèi)容可能會(huì)隨著操作不同而變化,但我們又不希望影響整體布局的寬度設(shè)置。那么該如何處理呢?我們
---
在當(dāng)今的客戶端軟件中,越來(lái)越多的人開(kāi)始使用HTMLayout布局來(lái)實(shí)現(xiàn)客戶端顯示效果。在展示交互信息時(shí),內(nèi)容可能會(huì)隨著操作不同而變化,但我們又不希望影響整體布局的寬度設(shè)置。那么該如何處理呢?我們希望不因內(nèi)容多少改變整體布局大小,也不想讓出現(xiàn)滾動(dòng)條影響美觀,解決方法就是讓超出的內(nèi)容以省略號(hào)形式顯示。
實(shí)現(xiàn)溢出文本省略號(hào)顯示
以數(shù)據(jù)列表為例,我們嘗試實(shí)現(xiàn)文本溢出后以省略號(hào)顯示的效果。首先,我們通常會(huì)用table來(lái)布局,代碼如下:
```css
table td:nth-child(2) {
text-align: left;
}
```
這段代碼用于控制第二列的顯示效果,使其左對(duì)齊。
如果我們將第二列的寬度減少,情況如下圖所示。可以看到,“Charlie Wang”直接折行,影響了整體布局的顯示。
為了避免文字折行,我們可以通過(guò)修改代碼來(lái)讓多余的文本顯示省略號(hào),代碼如下:
```css
table td:nth-child(2) {
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
其中,`text-overflow:ellipsis;`表示溢出文本顯示省略號(hào)。
實(shí)現(xiàn)預(yù)期效果
通過(guò)以上代碼修改,我們成功地實(shí)現(xiàn)了文本溢出后顯示省略號(hào)的效果。這種方法不僅適用于數(shù)據(jù)表,還可以運(yùn)用到其他方面,比如SEO標(biāo)題文字的控制。
這種控制方法的優(yōu)勢(shì)在于:
1. 無(wú)需通過(guò)程序限定字?jǐn)?shù);
2. 有利于SEO優(yōu)化。搜索引擎實(shí)際上是通過(guò)抓取字段中的關(guān)鍵字進(jìn)行優(yōu)化的。通過(guò)控制文本顯示,界面呈現(xiàn)不受影響,搜索引擎抓取也不會(huì)受到干擾。
通過(guò)合理運(yùn)用文本溢出顯示省略號(hào)的技巧,我們能夠更好地控制頁(yè)面展示效果,提升用戶體驗(yàn)同時(shí)又不妨礙SEO優(yōu)化的進(jìn)行。