文本超出隱藏

Posted 2022-01-30 2625664742-chanyk

<div class="text-box"></div>

单行文本：

.text-box
   width:300px;
   overflow:hidden;        /*隱藏超出的內容*/
   white-space:nowrap;        /*文本不換行*/
   text-overflow:ellipsis;    /*超出文本“······”顯示*/

多行文本

.text-box
     width: 300px;
     height: 50px;
     overflow: hidden;
     word-break: break-word;
     text-overflow: ellipsis;

或

.text-box
     width: 300px;
     height: 50px;
     overflow: hidden;
     word-break: break-all;
     text-overflow: ellipsis;