一般我們在做網頁商品列表的時候,
客戶他們的商品名稱有長有短
遇到名稱長短差距大的狀況
有時候可能會導致跑版
遇到這種情形
我們首要想到的可能就是限制他的字數
最常見的方式如下~!
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;
以上寫法是參考蝦皮購物
文章標籤
全站熱搜
留言列表