久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      CSS中處理不同長度文本的幾種小技巧

      CSS中處理不同長度文本的幾種小技巧

      【推薦教程:CSS視頻教程 】

      當(dāng)我們使用 CSS 構(gòu)建布局時(shí),考慮長短文本內(nèi)容很重要,如果能清楚地知道當(dāng)文本長度變化時(shí)需要怎么處理,可以避免很多不必要的問題。

      在許多情況下,添加或刪除一個(gè)單詞會改變 UI 的外觀,更糟的是,它可能會破壞原有的設(shè)計(jì),使其無法訪問。在我學(xué)習(xí) CSS 的早期,我低估了添加或刪除一個(gè)單詞的作用。在本文中,我會介紹幾種不同的技巧,大家可以馬上使用它們來處理CSS中不同長度的文本。

      問題

      在討論處理文本內(nèi)容的技巧之前,先來解釋一下這個(gè)問題,假設(shè)我們有一個(gè)垂直導(dǎo)航。

      CSS中處理不同長度文本的幾種小技巧

      名字的長度可以變化,特別是如果你是在一個(gè)多語言網(wǎng)站工作。在上面的示例中,隨著名稱變長,它被包裝到第二行。這里有一些問題

      • 應(yīng)該把這段文字截短嗎

      • 應(yīng)該換成多行嗎? 如果是,最多可以換行多少行?

      這種情況下單詞比預(yù)期的多,但是當(dāng)單詞太長時(shí)會發(fā)生什么呢?默認(rèn)情況下,它將溢出其容器。

      CSS中處理不同長度文本的幾種小技巧

      作為專業(yè)前端開發(fā)人員,重要的是要確定在這種情況下應(yīng)該要知道怎么處理。 幸運(yùn)的是,有一些CSS屬性就是專門用于解決此類問題。

      除此之外,問題不僅在于長內(nèi)容,短內(nèi)容也會破壞UI,或者至少會讓它看起來很奇怪。如下面的示例

      CSS中處理不同長度文本的幾種小技巧

      帶有ok文本的按鈕的寬度非常小。我并不是說這是一個(gè)致命的問題,但它會讓按鈕看起來很弱或很難被注意到。

      在這種情況下我們該怎么辦? 也許在按鈕上設(shè)置min-width? 無論內(nèi)容長度如何,都可以提供安全的寬度。

      長內(nèi)容

      在,大家已經(jīng)對問題有所了解,我們接著深入研究CSS 技巧,這些技巧可為處理長內(nèi)容提供解決方案。

      overflow-wrap

      CSS 屬性 overflow-wrap 是用來說明當(dāng)一個(gè)不能被分開的字符串太長而不能填充其包裹盒時(shí),為防止其溢出,瀏覽器是否允許這樣的單詞中斷換行。

      CSS中處理不同長度文本的幾種小技巧

      Hyphens

      CSS 屬性 hyphens 告知瀏覽器在換行時(shí)如何使用連字符連接單詞??梢酝耆柚故褂眠B字符,也可以控制瀏覽器什么時(shí)候使用,或者讓瀏覽器決定什么時(shí)候使用。

      .element {   hyphens: auto; }

      CSS中處理不同長度文本的幾種小技巧

      文本截?cái)嗵幚?/h4>

      截?cái)嗍侵冈诰渥拥哪┪蔡砑狱c(diǎn),以表明有

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號