Text alike components share some common style rules. The text alike components currently includes text
、input
and richtext
color
: <colors> this property set the foreground color of an component's text content.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); }
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 is normal
.font-weight
v0.9+:normal
, bold
, 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
normal
<text>
, <input>
lighter
, bolder
, number unit are not supported.<text>
and <input>
. In another way, it's not inherited.text-decoration
: <enum> none
| underline
| line-through
. This property is used to set the text formatting to underline or line-through. The default value is none
.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 is left
.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
and font-size
, as line-height
is restricted by top and bottom, font-size
is interpreted by glyph. Usually but not always, line-height
and font-size
with the same value will cause the text clipped.