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. * The property color
support multiple formats of values, contains rgb, rgba, #fff, #ffffff, named-color. Example: css .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
.
This property indicate the weight of the text.
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
.
::: warning 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 dom.addRule 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.
::: warning 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.
word-wrap
:<string> break-word
| normal
| anywhere
. This property determins word wrap mode. For Weex, anywhere
means clipping at character boundaries, other values or by default we break at word boundaries.