<dfn id="ipay3"></dfn>
  • <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
  • <big id="ipay3"></big>

    <small id="ipay3"></small>

    1. 零基礎建站培訓教程介紹

      當前位置:

      HTML+CSS控制文字超出部分省略號

      我們在做網站時,往往由于某個區塊的寬度有限,我們的文字過多就會超過這個寬度。瀏覽器默認情況下是進行換行顯示,但這會導航網站版面錯亂,這在門戶網站制作中經常遇到。

      解決文字過多超出的問題的方法就是使用CSS控制文字超出部分隱藏,隱藏部分顯示省略號。(相關教程:CSS視頻教程)效果如下圖:

      HTML+CSS文字超出部分省略號

      實現HTML+CSS文字超出部分顯示省略號的方法很簡單,只需要對這一個區塊添加以下的CSS樣式即可。(代碼中的div-name換成自己的DIV名)

      .div-name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }

      舉例:

      <style>
      .bz li {
      ?   width: 320px;
      ?   overflow: hidden;
      ?   text-overflow: ellipsis;
      ?   white-space: nowrap;}
      </style>

      <ul class="bz">
      <li><a href="http://www.qqpq.tw/buzou/9190.html" target="_blank">手機網站制作流程,怎么做手機網站教程/詳細步驟</a></li>
      </ul>

      上面的代碼是通過CSS控制一行文字超出顯示省略號,如果想控制多行文字超出隱藏加省略號,可以參考:CSS控制多行文字超出隱藏加省略號

      發表評論

      零基礎學建站就到學做網站論壇
      雅典娱乐城
      <dfn id="ipay3"></dfn>
    2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
    3. <big id="ipay3"></big>

      <small id="ipay3"></small>

      1. <dfn id="ipay3"></dfn>
      2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
      3. <big id="ipay3"></big>

        <small id="ipay3"></small>