1. 程式人生 > >微信小程式css篇---文字溢位

微信小程式css篇---文字溢位

最為一名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-orientvertical

word-break規定自動換行的處理方法。