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

資訊專欄INFORMATION COLUMN

在CSS中解決內(nèi)容過長的問題

Paul_King / 2005人閱讀

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

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

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

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

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

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

.button {
  padding-right: 50px;
}

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

輸入占位符

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

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

長名字

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

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

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

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

有時文章內(nèi)會包含該一些很長的超鏈接或者單詞，當(dāng)在視窗很寬的時候可能不會造成問題。但是對于一些尺寸較小的設(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。

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


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

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

帶有固定鏈接的段落頭


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

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

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

上面這個技巧被稱呼為"對齊移動包裹"。

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

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

相關(guān)文章

  • 在CSS中解決內(nèi)容過長的問題

    摘要：輸入占位符當(dāng)在我們的論壇使用浮動標(biāo)注模式的時候，特別是按鈕在右側(cè)的這種情況，我們需要充分的測試來避免因為占位符過長而導(dǎo)致的問題。當(dāng)標(biāo)簽的內(nèi)容過長的時候，寫死高度和寬度可能會造成布局崩掉。 當(dāng)我們寫css的時候，有時候會忘記設(shè)計里面存在的臨界情況。舉個例子來說吧，當(dāng)內(nèi)容的長度超過了我們的期望值，我們也無法解釋其中的可能性，頁面的設(shè)計很可能會因此而崩掉。我們不能保證css總是會按照我們期望...

    dackel 評論0 收藏0

  • CSS處理文本過長或超出部分（解說二）

    摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

    laznrbfe 評論0 收藏0

  • CSS處理文本過長或超出部分（解說二）

    摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

    xbynet 評論0 收藏0

  • CSS處理文本過長或超出部分（解說二）

    摘要：原理兩個盒子，文字內(nèi)容放于盒子，固定盒子的高度及行高，超出的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。 解說一中的方法不兼容火狐、IE瀏覽器，所以解說二會給出通用的css寫法。 原理：兩個盒子a、b，文字內(nèi)容放于盒子b，固定盒子a的高度及行高，超出a的內(nèi)容隱藏，在結(jié)尾處放置省略號，如下圖，紅線圈出部分用省略號覆蓋。showImg(https://segmentfa...

    AlienZHOU 評論0 收藏0

  • 微信小程序過長文本折疊效果的探索

    摘要：之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進(jìn)行的折疊的效果類型微信朋友圈那種。而最直接的文本過長判斷標(biāo)準(zhǔn)，是文本行數(shù)超過某個值?？偨Y(jié)以上，總結(jié)下小程序下文本過長折疊的思路文本過長由邏輯層判斷字符數(shù)確定，控制全文按鈕的展示與切換。 之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進(jìn)行的折疊的效果（類型微信朋友圈那種）。主要交互有三點： 讓文本過長時折疊、并顯示一個全文的點擊文本 當(dāng)用戶點擊全文則會展...

    cocopeak 評論0 收藏0

發(fā)表評論

0條評論

Paul_King

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<