css處理超出文本截斷問題的兩種情況(多行或者單行)


1.非多行的簡單處理方式:

  css代碼

    .words{

      width:400px;

        overflow:hidden;  /*超過部分不顯示*/
        text-overflow:ellipsis;  /*超過部分用點點表示*/
        white-space:nowrap;/*不換行*/

    }

  html代碼/*

  <div class="words">
     For a long time it seemed to me that life was about to begin , real life. But, there was always some obsacle in the way, something to be gotten through first, some unfinnished business, time still to be served or a debt to be paid. Then life would begin.
   </div>

2.規定行數的截斷處理方式

  css代碼

    .words{

    width:400px;

    text-overflow: ellipsis; /*有些示例里需要定義該屬性,實際可省略*/
     display: -webkit-box;
     -webkit-line-clamp: 2;/*規定超過兩行的部分截斷*/
     -webkit-box-orient: vertical;
    overflow : hidden; 
      word-break: break-all;/*在任何地方換行*/

    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM