<text>
is used to render text with specified styles.
:::warning This component supports no child components. :::
:::tip 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.
One can use the following code snippet to bind the content of text to a variable.
<template> <div> <text >{{content}}</text> </div> </template> <script> 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." } } } </script>
The rules for computed height of text component is complicated, basically but not always, text in Weex obey the following rules in order:
max-height
/min-height
on your textflex
on your text if there is a flex-direction:column
on the parent component of you text.height
on your textalign-items:stretch
on your text if there is a flex-direction:row
on the parent you text.Text component supports loading custom fonts in ttf
and woff
file formats.
font-family
name.font-family:YourFontFamilyName
style for your text component.:::warning iOS compatibility 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.
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.
:::
:::warning Android compatibility The word-break behavior is unpredictable and ROM dependent. Actually, the word-break strategy relies on Minikin
, which is highly inconsistent cross different Android ROMs, you should not rely its behavior.
Generally speaking, you would meet inconsistent word-break behavior if one of the following conditions meets: