1乏屯、text的空格符
- 首先需要設(shè)置
<text>控件的decode值 - decode可以解析的有
< > & '    
| 值 | 說明 |
|---|---|
| ensp | 中文字符空格一半大小 |
| emsp | 中文字符空格大小 |
| nbsp | 根據(jù)字體設(shè)置的空格大小 |
例如：
<text decode="emsp">提 交</text>
2熊泵、text單行顯示，超出部分省略號表示
- 單行顯示箕般，超出部分顯示省略號
.single {
/* 超出的文本內(nèi)容隱藏 */
overflow: hidden;
/* 超出顯示省略號 */
text-overflow: ellipsis;
/* 強(qiáng)制不換行 */
white-space: nowrap;
}
<text class="single">活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹</text>
單行顯示
- 多行顯示耐薯，設(shè)置顯示指定行數(shù)，超出部分顯示省略號
.mutli {
/* 對象作為伸縮盒子模型顯示 */
display: -webkit-box;
/* 允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行 */
word-break: break-all;
/* 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */
-webkit-box-orient: vertical;
/* 可顯示的最多行數(shù) */
-webkit-line-clamp: 2;
/* 超出的文本內(nèi)容隱藏 */
overflow: hidden;
/* 超出顯示省略號 */
text-overflow: ellipsis;
}
<text class="mutli">活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹活動介紹</text>
多行顯示
