微信小程式css篇---文字溢位
阿新 • • 發佈:2019-02-03
最為一名Android開發人員,現在無法拖控制元件寫佈局真的是一件很麻煩的事啊,所以css樣式成為了我做專案的最大隱患,遇到的問題可能做前端的人員看到會覺得很低端,但沒辦法我還是記錄下來吧,多遇到幾次就會了,廢話不多說,今天遇到的是text一行顯示,多的省略----文字溢位的問題。
如果是一行顯示的時候,寫在view裡的樣式,會在最後顯示省略號,但要是寫在text元件中設定這個樣式的話就是最後多出來的字隱藏了。
.textview{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
當然 有單行的省略 就有多行,不過多行的設定的有點複雜:
.textview{
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
-webkit-line-clamp:2;//這是設定顯示的多少行。
-webkit-box-orient:vertical。
word-break:規定自動換行的處理方法。