title: Text Styles type: wiki group: Style order: 3.2 version: 2.1

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); }
  • 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-weightv0.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.
  • 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.line-height 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.

Note