怎么在CSS中解決內(nèi)容過長問題-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在CSS中解決內(nèi)容過長問題，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

專注于為中小企業(yè)提供成都網(wǎng)站制作、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)南安免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

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

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

.button {
  padding-right: 50px;
}

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

輸入占位符

當在我們的論壇使用浮動標注模式的時候，特別是按鈕在右側(cè)的這種情況，我們需要充分的測試來避免因為占位符過長而導(dǎo)致的問題。

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

長名字

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

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

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

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

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

對于這個問題我們有兩個解決方案：

1)使用CSS word-break

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

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

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

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

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

過長的文章標簽

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

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

帶有固定鏈接的段落頭

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

當標題過長的時候可能會造成一些問題，一個更好的解決辦法是使用flexbox布局，這樣的話當沒有足夠空間的時候會自動將鏈接擠到下一行去。

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

上述內(nèi)容就是怎么在CSS中解決內(nèi)容過長問題，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：怎么在CSS中解決內(nèi)容過長問題-創(chuàng)新互聯(lián)
當前URL：http://www.muchs.cn/article32/sphpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站維護、品牌網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航、商城網(wǎng)站、全網(wǎng)營銷推廣

廣告

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