css為超過一定寬度的文本內容自動加上省略號


當在html中某個地方添加文本內容的時候如果內容過長我們會希望他超過一定寬度之后,其余的可以被截斷,后面補充為省略號;

實現方式:

  1、設置css樣式為文本不換行;

  2、位包裹文本的標簽指定寬度;

  3、設置自動隱藏超出的內容;

  4、設置超出的文本使用省略號;

CSS代碼如下:

1     width: 200px;
2     overflow: hidden;
3     font-size: large;
4     white-space: nowrap;
5     text-overflow: ellipsis;

舉個栗子:

<html>
    <head></head>
    <body style="padding: 20px;">
        <div style="width: 200px;overflow: hidden;font-size: large;white-space: nowrap;text-overflow: ellipsis;">
        你好,我是用來測試的文字,我現在可以出現省略號
        </div>
    </body>
</html>

運行效果:

OK!

 


免責聲明!

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



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