不同于Lable只显示单行文本,Text可以显示多行文本,通过断行符,和根据Text的宽带,高度能自适应的文本断行。Text 默认为可选,可以通过设置Selectable是否可选,不支持底色,边框和焦点。
在启动后,如果Text显示为多行,选择一部分文本后,文本会自动滚动并且产生一些文本隐藏,中文的文本显示时,双击按钮会发现,每双击一下自动选择接下来的一个中文字<这些挺有意思,但估计不爽,别的都是全选应该算bug>
1.Text 自适应长度和高度
<mx:Text width="50" height="40" text="This is a text component,If you need an editable multiline component, use TextArea.">
运行后只能显示部分文字"This is a text",没有缩略符"..."提示,同时也无Tooltip;
Flex帮助提示用"\n"来强制断行,一直没有试出来,每次显示该\n在页面;
Text提供maxWidth和maxHeight属性。
<mx:Text width="50" text="This is a text component,If you need an editable multiline component, use TextArea."> 文本自适应断行;
<mx:Text maxWidth="50" text="This is a text component,If you need an editable multiline component, use TextArea.">文本不断行,只显示width为50的文本
2.Text支持htmlText
A:
<mx:Text width="100%" text="This is a text component." />
B:
<mx:Text width="100%">
<mx:text>
This is a text component.
</mx:text>
</mx:Text>
C:
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[
This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.
]]>
</mx:htmlText>
</mx:Text>
使用htmlText时候,象C方式是Flex2在code中会自动输入CDATA,但是这样输入后会在文本前显示一段空白和空行,如果你想显示一段没有默认添加的,请按D方式输入:
D:
<mx:Text width="100%">
<mx:htmlText>
<![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]>
</mx:htmlText>
</mx:Text>
在Text中的htmlText必须使用CDATA,并且作为htmlText的subtag,否则html的属性将不会被支持。
Adobe Flex reference:
The Text control displays multiline, noneditable text. Use the Label control if you need only a single line of text.
The Text control does not support scroll bars. If you need scrolling, you should use a non-editable TextArea control.
You can format the text in a Text control using HTML tags, which are applied after the control's CSS styles are applied. You can also put padding around the four sides of the text.
The text in a Text control is selectable by default, but you can make it unselectable. When using a Text control in an item renderer, always set its selectable
property to false
.
If the control is not as wide as the text, the text will wordwrap. The text is always aligned top-left in the control.
To size a Text component, it's common to specify an explicit width and let Flex determine the height as required to display all the text. If you specify an explicit height, some of the text may get clipped; unlike Label, Text does not truncate its text with "...". It's also common to use percentage widths and heights with Text.
If you leave both the width and the height unspecified, Flex calculates them based on any explicit line breaks in the text, with no wordwrapping within lines. For example, if you set the text
property, the newline character "\n"
causes a line break. If you set the htmlText
property, the HTML markup <br>
causes a line break. If your text
or htmlText
is lengthy and doesn't contain line breaks, you can get a very wide Text component; you can set the maxWidth
to limit how wide the component is allowed to grow.
Text controls do not have backgrounds or borders and cannot take focus.