天天看點

前端html多的字顯示成省略号

之前處理這類問題,都是采用後端的方法。使用php的mb_substr($str,“utf-8”)方法,會産生問題。現在用樣式來控制:

  1. 多行:
<style type="text/css">
.p1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
           
  1. 一行:

    超出一行用ellipsis顯示

.product-buyer-name {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;  //文本不換行,這樣超出一行的部分被截取,顯示...
}
           

參考:https://blog.csdn.net/liwenfei123/article/details/69666880

繼續閱讀