<text> 是螞蟻動態卡片引擎內建的組件，用來將文本按照指定的樣式渲染出來。<text> 只能包含文本值，可以使用 {{}} 標記插入變數值作為常值內容。
嵌入組件支援
不可嵌套任何其他組件。
樣式
<text> 組件支援 通用樣式 中的所有樣式，此外，還支援其他特殊樣式：
字型相關
|
屬性 |
描述 |
實值型別 |
預設值 |
可選值 |
寫法 |
備忘 |
|
font-size |
文字大小 |
長度單位 |
16px |
|
font-size: 10px; |
|
|
font-weight |
字型粗細程度 |
string |
normal |
normal、bold、100、200、300、400、500、600、700、800、900；normal 等於 400。iOS 支援 9 種值，Android 支援 normal、bold 和介於（normal，bold）之間的三種， 對應的值為 400 為 normal 效果、700 及以上為 bold 效果、400 和 700 之間統一為 FakeBold 效果。 |
font-weight: bold; |
|
|
font-weight: 700; |
|
|||||
|
font-style |
字型樣式 |
string |
normal |
normal、italic |
font-style: normal; |
|
|
font-family |
設定字型 |
string |
平台預設字型 |
|
font-family: PingFangSC-Regular; |
不保證該設定在不同平台、裝置間的一致性，如所設定的字型在平台上不可用，將會降級到平台的預設字型。 |
排版相關
|
屬性 |
描述 |
實值型別 |
預設值 |
可選值 |
寫法 |
備忘 |
|
lines |
文本行數 |
int |
0，表示不限制行數 |
|
lines: 10; |
|
|
text-align |
字型對齊 |
string |
left |
left、center、right |
text-align: center; |
|
|
text-overflow |
設定內容超長時的省略樣式 |
string |
clip |
clip、ellipsis |
text-overflow: clip; |
ellipsis 當前僅支援單行省略。
說明
部分Android 手機省略符號可能會在中間展示，由作業系統決定。 |
|
line-height |
設定文本行高 |
長度單位 + 數值 |
0 |
|
line-height: 12px; |
|
|
white-space |
控制文本中的換行和空白策略 |
string |
pre-wrap |
|
white-space: nowrap; |
- |
|
word-wrap |
控制折行方式（單詞拆分與否） |
string |
break-word |
|
word-wrap：beak-word: |
- |
|
word-break |
控制折行時單詞如何拆分 |
string |
無 |
|
word-break; |
不區分中英文，和中英混排的情況。 |
|
letter-spacing |
控制字元間隔，可正，可負 |
string |
0 |
normal：無額外空間。單值長度單位：可正可負。 |
letter-spacing:5px; |
- |
|
text-indent |
首行文本的縮排，可正，可負，可以是百分比（父元素寬度的百分比） |
string |
0 |
單值長度單位 + 百分比：可正可負。 |
text-indent:30%; |
- |
|
vertical-align |
文本垂直方向對齊樣式 |
string |
baseline |
baseline|sub|super|長度|百分比|top|bottom|middle|top|bottom
重要
基準和字型相關，請謹慎使用。
|
vertical-align:middle |
- |
效果相關
|
屬性 |
描述 |
實值型別 |
預設值 |
可選值 |
寫法 |
備忘 |
|
color |
字型顏色 |
色彩單位 |
0x000000 |
|
color:red; |
|
|
color:#333; |
|
|||||
|
color:rgb(255,0,255); |
|
|||||
|
text-decoration |
字型裝飾 |
string |
none |
underline，none，line-through，overline |
text-decoration: underline; |
- |
|
text-shadow |
字型陰影 |
長度單位 & 色彩單位 |
|
支援格式${x}${y}${size}${color}，x，y，size 滿足長度單位，color 滿足色彩單位。 |
text-shadow: 2px 2px 3px gray; |
顏色預設字型顏色 color。 x、y 是必需參數，其他可選。 |
|
text-shadow-color |
字型陰影顏色 |
色彩單位 |
與 color 相同 |
|
text-shadow-color: blue; |
選擇性參數 |
|
text-shadow-offset |
字型陰影位移 |
長度單位 |
|
- |
text-shadow-offset: 2px 2px; |
必需參數 |
|
text-shadow-radius |
字型陰影半徑 |
長度單位 |
0 |
|
text-shadow-radius: 3px; |
選擇性參數 |
屬性
|
屬性 |
描述 |
實值型別 |
預設值 |
寫法 |
備忘 |
|
value |
組件的值，常值內容 |
string |
|
<text value="常值內容字串"></text> |
|
|
line-space |
行間距，如 4px |
長度單位 |
|
<text line-space="4px"></text> |
|
事件
<text> 組件支援 通用事件 中的所有事件。
樣本
<text class="text">
Cube 引擎是一套簡單易用的跨平台開發方案，能以 Web 的開發體驗構建高效能、可擴充的原生應用。Vue 是一個輕量並且功能強大的漸進式前端架構。
</text>
.text {
lines: 3;
color: #666666;
font-size: 32px
}與 Web 端差異
螞蟻動態卡片與 Web 端差異主要是以下兩點，更多細節請參見下表。
-
word-break 是否區分中英文處理（螞蟻動態卡片不支援）。
-
長詞超出背景框時不區分中英混排。
|
Web |
螞蟻動態卡片 |
|
word-wrap 不寫的情況與 word-wrap:normal 相同。 |
word-wrap 不寫的情況與 word-wrap:break-word 相同。 |
|
word-wrap:normal 單詞不折行，超出背景框顯示（識別單詞的原則為連續英文字元為單詞）。 |
word-wrap:normal 單詞不折行，超出背景框顯示（識別單詞原則為連續英文字元，包括中間混排中文）。 |
|
word-break:normal 中文拆分折行，英文單詞不拆分折行，可超出背景框顯示。 |
word-break:normal 中文拆分折行，英文單詞不拆分折行，可超出背景框顯示。 |
|
word-break:keep-all 中文不拆分折行，英文單詞不拆分折行可超出背景框顯示。 |
word-break:keep-all 與 normal 相同。 |
|
- |
letter-spacing 在 Android 5.0 以上系統支援。 |
範例程式碼
-
單擊此處 detailFontSize.zip 擷取關於字型大小的完整範例程式碼。
-
單擊此處 detailFontWeight.zip 擷取關於字型粗細的完整範例程式碼。
-
單擊此處 detailTextAlign.zip 擷取關於字型對齊的完整範例程式碼。