文字溢出時，實現在末尾顯示三個點省略效果

本文地址：ttp://www.cnblogs.com/veinyin/p/7629781.html 

 

有時我們會有這樣的需求：當文本內容較多，寬度超出父容器時，就在最后顯示三個點，代表還有東西被折疊起來了。如下圖

具體實現

HTML 如下

<div>
    <p>我是文字我是文字我是文字我是文字</p>
</div>

 

div 樣式如下

div {
    width: 200px;
    margin: 100px auto;
    border: 1px solid #CCCCCC;
}

簡單加了個邊框，然后居中方便截圖，然后給了個寬度，作為文本寬度的限制

 

p 的樣式如下

p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

第 2 行表示強制在一行顯示，如果不強制在一行顯示，超出容器寬度的內容換行顯示，父容器直接被撐高，就沒有溢出了；

第 3 行表示在溢出時顯示省略標記，也就是圖中紅線圈出來的三個點，這個就沒啥好說的了；

第 4 行表示溢出部分內容隱藏，不溢出隱藏的話.... 第 3 行的溢出設置還有啥用，我都直接顯示到父容器外面了啊喂！

 

 

但有時我們需要實現多行文本末尾折疊，可以使用如下方法，但兼容性較差，可以用於移動端

@左耳_fly 提出了火狐不支持的問題，對的，在這里聲明下，火狐和 IE 不支持的哈，截圖是 chrome 里的 

p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

第 5 行為要顯示的行數

 

 

END~~~≥ω≤