html文字兩行後，就用省略號代替剩下的

實現原理很簡單，將box的高度設定為行高的兩倍，超出之後隱藏，這樣就只有兩行了，然後再用after屬性絕對定位在第二行後面加幾個點 ...

.style2.style2::after

.font_cut

.style2::after

.style2::after

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>document
title
>
6<
style
>
7.font_cut
13.style2
19.style2::after 
2728
style
>
2930
31head
>
32<
body
>
33<
div 
class
="font_cut"
style
="width: 300px;"
>
34<
span
>一行顯示不下，就用省略號代替；一行顯示不下，就用省略號代替；一行顯示不下，就用省略號代替；一行顯示不下，就用省略號代替；一行顯示不下，就用省略號代替；一行顯示不下，就用省略號代替；
span
>
35div
>
36<
div 
style
="margin-bottom: 60px;"
>
div>
37<
div 
class
="style2"
style
="width: 300px;"
>
38<
span 
style
=""class
="">html文字超過兩行以後 就用省略號顯示代替;html文字超過兩行以後 就用省略號顯示代替;html文字超過兩行以後 就用省略號顯示代替;html文字超過兩行以後 就用省略號顯示代替;html文字超過兩行以後 就用省略號顯示代替;html文字超過兩行以後 就用省略號顯示代替;
span
>
39div
>
40body
>
41html
>

多行超出顯示省略號

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //2行

-webkit-box-orient: vertical;

注意：-webkit-line-clamp是乙個 不規範的屬性（unsupported webkit property），它沒有出現在 css 規範草案中。只適用於webkit核心的瀏覽器，因此firebox、ie等並不支援該屬性。

其他瀏覽器做法：

比較靠譜簡單的做法就是設定相對定位的容器高度，用包含省略號(…)的元素模擬實現：

文字容器樣式設定：

position:relative;

line-height:1.4em;

height:4.2em; //height是line-height的整數倍，防止文字顯示不全

overflow:hidden;

文字容器::after

或者使用外掛程式：js外掛程式-clamp.js 、 jquery外掛程式-jquery.dotdotdot

單行不換行：width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

文字溢位兩行打省略號

兩行 谷歌瀏覽器下相容 html p class contxt bulka 01 iphone 6,iphone 6s screen protector teksonic iphone 6 and iphone 6s iphone 6s iphone 6s p css contxt bulka 01...

css超出兩行顯示省略號

1.css寫法只對webkit核心的瀏覽器好用,對safari瀏覽器有相容問題.demo2.css超出兩行顯示省略號 個人寫法 twolines article ref article content ref p p cover v if isshow span div div template e...

css 文字強制兩行超出就顯示省略號

1.強制一行的情況很簡單 overflow hidden 超出的隱藏 text overflow ellipsis 省略號 white space nowrap 強制一行顯示 2.如果要強制兩行的話，得用到css3的知識 overflow hidden text overflow ellipsis ...