<text> is used to render text with specified styles.

Note: This component supports no child components.

Note: The heading and trailing white spaces will be ignored. If this is not what you need, you can set text using data-binding method demonstrated below.



Except for dynamic text, there is no other supported attributes for text.

Dynamic text

One can use the following code snippet to bind the content of text to a variable.

    <text >{{content}}</text>
  module.exports = {
    data: function(){
      return {
          content: "Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework."



Text height

The rules for computed height of text component is complicated, basically but not always, text in Weex obey the following rules in order:

  1. The CSS style of max-height/min-height on your text
  2. The CSS style of flex on your text if there is a flex-direction:column on the parent component of you text.
  3. The CSS style of height on your text
  4. The CSS style of align-items:stretch on your text if there is a flex-direction:row on the parent you text.
  5. The content of your text and text styles on your text.
  6. Other related CSS styles not mentioned here.

Custom Typeface v0.12+

Text component supports loading custom fonts in ttf and woff file formats.

  1. Create your font with unique font-family name.
  2. Using addRule method of dom module to register your font.
  3. Set font-family:YourFontFamilyName style for your text component.

Note: You can name fontFamily in addRule as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binary data of font file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a ‘?’. To get the real name of a font file on Mac, right click on the file in Finder and inspect the file info. This image shows a BAD CASE. You should never use iconfont as family-name.


Note: Specially, if you are using Alibaba Iconfont to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.


Last Updated: 1/8/2019
Excellent docUnusable doc