<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>
wx
unitfont-size
and line-height
support wx
. For styles that should not be affected by screen width and viewPortWidth, please use wx
as unit.
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
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.
:::
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.
:::warning Android compatibility Generally speaking, you would meet inconsistent word-break behavior if one of the following conditions meets:
::: tip hack into word-break Developers could add \uFEFF
namely ZERO WIDTH NO-BREAK SPACE just after the character with inconsistent word-break behavior to force no-break strategy, ref demo to see more detail。\uFEFF
may not work on all Android ROMs, as some of them may just ignore it. :::