牆壁彩繪 / Lin.mo 里莫彩繪事務所 , 藝術設計,

一般我們在做網頁商品列表的時候,

客戶他們的商品名稱有長有短

遇到名稱長短差距大的狀況

有時候可能會導致跑版

遇到這種情形

我們首要想到的可能就是限制他的字數

最常見的方式如下～！


    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;   
    width:250px;
    overflow: hidden;

這種方式是達到文字一行

但客戶如果要求希望達到兩行的時候

可以用以下方式
 

兩行樣式

word-wrap: break-word;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical; /*讓文字變成兩行的關鍵*/
-webkit-line-clamp: 2; /* 這是設定問自尾端 .... 點點 要呈現在第幾行*/
overflow: hidden;

以上寫法是參考蝦皮購物

https://shopee.tw/linmojason