溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

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

css中內(nèi)容過長的解決方法介紹

發(fā)布時(shí)間:2020-03-26 10:49:10 來源:億速云 閱讀:144 作者:小新 欄目:web開發(fā)

今天小編分享的是css中內(nèi)容過長的解決方法介紹,可能大家對css并不陌生,或者從來沒有了解過css。但是不用擔(dān)心,今天小編會(huì)以最簡單的描述來講解css中內(nèi)容過長的解決方法。

css中內(nèi)容過長的解決方法介紹

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

具體情況如下:

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

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

我們可以在右側(cè)增加足夠的padding值來適應(yīng)圖標(biāo)的大小

.button {
  padding-right: 50px;
}

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

輸入占位符

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

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

長名字

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

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

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

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

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

對于這個(gè)問題我們有兩個(gè)解決方案:

(1)使用CSS word-break

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

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

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

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

這個(gè)方案對于過長的鏈接比較友好,對于長單詞,我推薦使用 word-break。

過長的文章標(biāo)簽

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

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

帶有固定鏈接的段落頭

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

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

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

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

以上就是css中內(nèi)容過長怎么解決的詳細(xì)內(nèi)容,更多請關(guān)注億速云其它相關(guān)文章!

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

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

AI