如何通過text渲染指定樣式的文本 - Mobile Platform as a Service

<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	字型粗細程度	string	normal		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;	為數值時為 fontSizevalue。為長度單位 px 尾碼時為 value 本身。為長度單位的百分比時為 fontSizevalue。
white-space	控制文本中的換行和空白策略	string	pre-wrap	normal：空白字元摺疊，文本自動換行，不根據內容中分行符號或段落換行。 nowrap：空白字元摺疊，文本不換行，一行顯示，可超出背景框。 pre：空白字元不摺疊，根據常值內容段落換行，每段內不自動換行（每段一行，可超出背景框）。 pre-wrap：空白字元不摺疊，根據內容段落換行，且段落內自動換行。pre-line：空白字元摺疊，根據內容段落換行，且段落內自動換行。	white-space: nowrap;	-
word-wrap	控制折行方式（單詞拆分與否）	string	break-word	normal：單詞結束處折行，可超出背景框 break-word：單詞結束處折行，但是長度仍不夠時，可以在單詞中間折行 anywhere：可在任意處折行。	word-wrap：beak-word:	-
word-break	控制折行時單詞如何拆分	string	無	normal：單詞不拆分折行，可超出背景框。 break-all：單詞可拆分折行。 keep-all：與 normal 相同。	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 重要基準和字型相關，請謹慎使用。 `middle` 使元素的中部與父元素的基準加上父元素 x-height 的一半對齊。 `baseline` 使元素的基準與父元素的基準對齊。HTML 規範沒有詳細說明部分可替換元素的基準，如 `<textarea>`，意味著這些元素使用此值的表現因瀏覽器而異。 `sub` 使元素的基準與父元素的下標基準對齊。 `super` 使元素的基準與父元素的上標基準對齊。 `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 擷取關於字型對齊的完整範例程式碼。