本篇內(nèi)容介紹了“在CSS中如何解決內(nèi)容過長(zhǎng)的問題”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、濠江網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為濠江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

這是一個(gè)手風(fēng)琴效果的開關(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)我們沒有考慮到較長(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)檎嘉环^長(zhǎng)而導(dǎo)致的問題。

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

長(zhǎng)名字

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

這里的問題是我們只向左浮動(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ì)造成問題。但是對(duì)于一些尺寸較小的設(shè)備，諸如手機(jī)或平板電腦，這可能會(huì)產(chǎn)生煩人的橫向滾動(dòng)條。

對(duì)于這個(gè)問題我們有兩個(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ì)于過長(zhǎng)的鏈接比較友好，對(duì)于長(zhǎng)單詞，我推薦使用 word-break。

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

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

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

帶有固定鏈接的段落頭

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

當(dāng)標(biāo)題過長(zhǎng)的時(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è)技巧被稱呼為'對(duì)齊移動(dòng)包裹'。

“在CSS中如何解決內(nèi)容過長(zhǎng)的問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享文章：在CSS中如何解決內(nèi)容過長(zhǎng)的問題
標(biāo)題來(lái)源：http://jinyejixie.com/article46/gdjshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、App開發(fā)、網(wǎng)站建設(shè)、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)