CSS解決文字自動換行
阿新 • • 發佈：2019-02-03
1.單行文字溢位隱藏：
p{ text-overflow: ellipsis;//必須 white-space: nowrap;//必須 overflow: hidden;//必須 }
2.多行文字溢位隱藏： （只適用移動端和 chrome）
p{
word-break: break-all;
text-overflow: ellipsis; display: -webkit-box; /** 物件作為伸縮盒子模型顯示 **/ -webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/ -webkit-line-clamp: 2; /** 顯示的行數 **/ overflow: hidden; /** 隱藏超出的內容 **/} 3.跨瀏覽器的多行文字溢位：
p{
position: relative;
line-height: 18px;
max-height: 36px;
overflow: hidden;
&::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}注意事項：
- height高度真好是
line-height的整數倍； - 結束的省略好用了半透明的png做了減淡的效果，或者設定背景顏色；
- IE6-7不顯示
content內容，所以要相容IE6-7可以是在內容中加入一個標籤，比如用<span class="line-clamp">...</span>去模擬； - 要支援IE8，需要將
::after替換成:after； - 會有不管是否超過都會出現...的bug可通過js調整
line-height: 18px;
max-height: 36px;
overflow: hidden;
&::after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}