ウィジェットテキストのハイパーライン非表示省略記号

ウィジェット開発の過程で、textに完全に表示できないデータがあることが多いので、関連文字を隠すために使用し、後ろに省略記号(...)を付けます.では、どのように展示しますか?
方法1:
対応するtextに次のcssを設定するだけでいいです.

overflow:hidden;//           

text-overflow:ellipsis;//          

white-space:nowrap;//     

 
上のcssは単行表示の隠蔽しか保証できませんが、2、3、n行の隠蔽がほしいですか?この要求も実はcssでできる.次にcssを貼り付けます.

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

 
その中の-webkit-line-clampの数字を変えるだけで、対応する需要を実現することができます.
方法2:現在substringに基づいて切り取り、文字の前の100200などを切り取ってデータを表示し、+'...'を加えることもできます.効果を達成します.
tips:メソッド2は変数データソースの切り取りを必要とし、また、あなたが切り取った文字が足りないことを示す場合、切り取りを無視することを判断する必要があります.あまりお勧めではありませんが~~~