在CSS中解決內(nèi)容過(guò)長(zhǎng)的問(wèn)題

dackel 發(fā)布于2019-08-30 10:48 / 2047人閱讀

摘要：輸入占位符當(dāng)在我們的論壇使用浮動(dòng)標(biāo)注模式的時(shí)候，特別是按鈕在右側(cè)的這種情況，我們需要充分的測(cè)試來(lái)避免因?yàn)檎嘉环^(guò)長(zhǎng)而導(dǎo)致的問(wèn)題。當(dāng)標(biāo)簽的內(nèi)容過(guò)長(zhǎng)的時(shí)候，寫死高度和寬度可能會(huì)造成布局崩掉。

當(dāng)我們寫css的時(shí)候，有時(shí)候會(huì)忘記設(shè)計(jì)里面存在的臨界情況。舉個(gè)例子來(lái)說(shuō)吧，當(dāng)內(nèi)容的長(zhǎng)度超過(guò)了我們的期望值，我們也無(wú)法解釋其中的可能性，頁(yè)面的設(shè)計(jì)很可能會(huì)因此而崩掉。我們不能保證css總是會(huì)按照我們期望的那樣工作，但至少我們可以用不同類型的內(nèi)容來(lái)測(cè)試，以減少這種情況的發(fā)生。

在這篇文章里，我們通過(guò)審查真實(shí)網(wǎng)站的各種的UI問(wèn)題來(lái)解釋這些網(wǎng)站可能會(huì)崩潰的原因。準(zhǔn)備好了么？來(lái)吧！

一個(gè)右側(cè)/左側(cè)有小圖標(biāo)的按鈕

這是一個(gè)手風(fēng)琴效果的開(kāi)關(guān)按鈕。按鈕右側(cè)有一個(gè)小圖標(biāo)用來(lái)強(qiáng)調(diào)它是可點(diǎn)擊的。然而當(dāng)按鈕的區(qū)域不夠長(zhǎng)的時(shí)候，按鈕上的文字會(huì)蓋住圖標(biāo)。當(dāng)我們沒(méi)有考慮到較長(zhǎng)內(nèi)容的時(shí)候這種情況就可能發(fā)生。

一個(gè)解決辦法是在右側(cè)增加足夠的padding值來(lái)適應(yīng)圖標(biāo)的大小

.button {
  padding-right: 50px;
}

注意我們是如何增加padding值來(lái)給圖標(biāo)創(chuàng)造出一塊安全的顯示區(qū)域的，現(xiàn)在我們可以確定按鈕的布局不會(huì)再被破壞了。

輸入占位符

當(dāng)在我們的論壇使用浮動(dòng)標(biāo)注模式的時(shí)候，特別是按鈕在右側(cè)的這種情況，我們需要充分的測(cè)試來(lái)避免因?yàn)檎嘉环^(guò)長(zhǎng)而導(dǎo)致的問(wèn)題。

一個(gè)解決辦法是給按鈕添加 position: relative，這樣會(huì)讓按鈕覆蓋在占位符上層。

長(zhǎng)名字

在這個(gè)設(shè)計(jì)中，圖片向左浮動(dòng)，右側(cè)有作者名字的信息。當(dāng)右側(cè)的信息長(zhǎng)度過(guò)長(zhǎng)的時(shí)候會(huì)發(fā)生什么呢？毫無(wú)疑問(wèn)布局會(huì)崩掉。

這里的問(wèn)題是我們只向左浮動(dòng)了圖片，使得作者的名字移動(dòng)到貼著它，但是這只會(huì)在作者名字長(zhǎng)度較短的時(shí)候才會(huì)表現(xiàn)良好。

為了使頁(yè)面布局的適應(yīng)性更強(qiáng)，我們需要給這兩個(gè)元素都增加 width。更推薦的方式是使用flexbox，更適合這樣的小型組件。

文章內(nèi)有長(zhǎng)鏈接/單詞

有時(shí)文章內(nèi)會(huì)包含該一些很長(zhǎng)的超鏈接或者單詞，當(dāng)在視窗很寬的時(shí)候可能不會(huì)造成問(wèn)題。但是對(duì)于一些尺寸較小的設(shè)備，諸如手機(jī)或平板電腦，這可能會(huì)產(chǎn)生煩人的橫向滾動(dòng)條。

對(duì)于這個(gè)問(wèn)題我們有兩個(gè)解決方案：

1)使用CSS word-break

.article-body p {
  word-break: break-all;
}

word-break屬性在不同的瀏覽器內(nèi)表現(xiàn)不太一樣，因此在使用的時(shí)候需要充分測(cè)試。

2) 給外層元素添加overflow和 text-overflow

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

這個(gè)方案對(duì)于過(guò)長(zhǎng)的鏈接比較友好，對(duì)于長(zhǎng)單詞，我推薦使用 word-break。

過(guò)長(zhǎng)的文章標(biāo)簽

當(dāng)我們放置一個(gè)文章標(biāo)簽在卡片上，我們最好只通過(guò)設(shè)定它的padding來(lái)確定它的大小。當(dāng)標(biāo)簽的內(nèi)容過(guò)長(zhǎng)的時(shí)候，寫死高度和寬度可能會(huì)造成布局崩掉。

也可以給標(biāo)簽設(shè)定一個(gè)最小的寬度，當(dāng)對(duì)padding包裹的標(biāo)簽內(nèi)容元素使用min-width屬性時(shí)，寬度是動(dòng)態(tài)變化的，問(wèn)題就解決了。

帶有固定鏈接的段落頭

這個(gè)例子是在段落標(biāo)題的右側(cè)有一個(gè)‘view more’鏈接。有幾種不同的方式來(lái)編寫CSS，其中一種是對(duì)鏈接使用絕對(duì)定位。

當(dāng)標(biāo)題過(guò)長(zhǎng)的時(shí)候可能會(huì)造成一些問(wèn)題，一個(gè)更好的解決辦法是使用flexbox布局，這樣的話當(dāng)沒(méi)有足夠空間的時(shí)候會(huì)自動(dòng)將鏈接擠到下一行去。

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

上面這個(gè)技巧被稱呼為"對(duì)齊移動(dòng)包裹"。

GPU云服務(wù)器云服務(wù)器 webrtc在webview中使用問(wèn)題解決問(wèn)題的方法云計(jì)算解決的問(wèn)題短視頻問(wèn)題的解決措施

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114582.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

dackel

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

華納云(hncloud)：美國(guó)云服務(wù)器24元/月起，美國(guó)30GDDOS高防云服務(wù)器588元/月起，美

閱讀 1202·2021-10-20 13:48
記錄參與Cesium羅盤控件（cesium-navigation-es6）的感想

閱讀 2247·2021-09-30 09:47
程序員之生日聚會(huì)

閱讀 3133·2021-09-28 09:36
做一個(gè)好看的紅白機(jī)模擬器

閱讀 2379·2019-08-30 15:56
前端開(kāi)發(fā)中對(duì)圖片的優(yōu)化技巧總結(jié)

閱讀 1229·2019-08-30 15:52
在CSS中解決內(nèi)容過(guò)長(zhǎng)的問(wèn)題

閱讀 2048·2019-08-30 10:48
組件復(fù)用那些事兒 - React 實(shí)現(xiàn)按需加載輪子

閱讀 639·2019-08-29 15:04
學(xué)習(xí)webpack前的準(zhǔn)備工作

閱讀 598·2019-08-29 12:54

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

在CSS中解決內(nèi)容過(guò)長(zhǎng)的問(wèn)題

相關(guān)文章