Text Styles
Text alike components share some common style rules. The text alike components currently includes text
、input
and richtext
Properties#
color
: <colors> this property set the foreground color of an component’s text content.- The property
color
support multiple formats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example:.my-class { color: red; }
.my-class { color: #f00; }
.my-class { color: #ff0000; }
.my-class { color: rgb(255, 0, 0); }
.my-class { color: rgba(255, 0, 0, 0.5); }
- The property
font-size
: <length> this property specifies the size of the font.font-style
: <enum>normal
|italic
. This property lets you select italic or normal faces within a font-family. Default value isnormal
.font-weight
v0.9+:- values:
normal
,bold
,100
,200
,300
,400
,500
,600
,700
,800
,900
- normal is equal to 400, bold equel to 700
- default value:
normal
- apply to:
<text>
,<input>
- ios support showing 9 kind of font-weight.
- android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700
- Some standard values like
lighter
,bolder
, number unit are not supported. - The effect not apply to all elements, just
<text>
and<input>
. In another way, it’s not inherited.
- values:
text-decoration
: <enum>none
|underline
|line-through
. This property is used to set the text formatting to underline or line-through. The default value isnone
.Only support for
<text>
and<ricthext>
text-align
: <enum>left
|center
|right
. This property describes how inline content like text is aligned in its parent component. The default value isleft
.font-family
:<string> this property set the font-family of the text. This property doesn’t guarantee the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. If you want load your own font-family, ref custom-font instead.text-overflow
:<enum>clip
|ellipsis
. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis.Only support for
<text>
and<ricthext>
lines
: <number> positive number. This is the max lines of text that would be displayed, the default value is 0 which means there is no restriction on text lines. If the text is not enough, the actual number of line may be shorter than the specified value.line-height
: <length> The line height of every line in the text.line-height
is the space between top and bottom.There is no relationship between
line-height
andfont-size
, asline-height
is restricted by top and bottom,font-size
is interpreted by glyph. Usually but not always,line-height
andfont-size
with the same value will cause the text clipped.