`

flex中的Text属性

    博客分类:
  • Flex
阅读更多

不同于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提供maxWidthmaxHeight属性。

<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.

分享到:
评论

相关推荐

    Flex4 CSS样式.doc

    在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...

    Flex_Css完全手册.docFlex关于样式专题.pdf

    在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...

    详解CSS中的display:flex||inline-flex属性|56375.pdf

    介绍 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。...style type="text/css"&gt; .main{ width:200px; background-color: red

    C#版ActiveX + JS +Flex通讯 完整实现

    4:點了OK后,就會出現以下畫面,要保證Register属性为vsdrpCOM 5:Build it..你會在Folder下看到 到此位置,控件打包完畢。 ActiveX控件的調用 1:加載: ...

    flex3的cookbook书籍完整版dpf(包含目录)

    在FlexBuilder中设置MXML编译器选项 1.5节.在FlexBuilder外部编译Flex项目 1.6节.在MXML中添加事件监听器 1.7节.设置子节点属性 1.8节.定义数组和对象 1.9节.在ActionScript中设置变量的作用域 1.10节.在...

    Flex4倒计时源码(带声音)

    一个很不错的Flex倒计时源码 技术要点TextInput组件的restrict属性应用如(0-9)意味着用户只能输入数字,还有那个倒计时的算法,同时可播放声音

    css3弹性盒子flex实现三栏布局的实现

    用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会...

    css入门笔记

    独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 &lt...

    Altium Designer Beta 19.0.10完整版安装包+安装教程+和谐文件

    修复了“属性”面板中的错误,该错误导致NEXUS Server托管组件的“无法在可用库中找到组件”错误,该组件也损坏了引用。 27404 修复了从服务器更新组件数据时由于过多的数据请求导致的ActiveBOM延迟问题。 27535 ...

    前端小白面试一定会遇到的坎(持续不定期更新)

    本人是一个前端小白,自己总结面试及工作学习中遇到的一些...2:通过flex属性,父盒子设置flex属性,子盒子设置align-self: center; 3:通过定位实现水平居中 4:将内部盒子转化为display:inline-block;搭配text-align:cen

    最新CSS3学习视频教程 33讲完整版 后盾网CSS3视频教程

    ├25 flex弹性盒模型 flex-direction flex-wrap.mp4 ├26 justify-content align-items align-content order.mp4 ├27 阿里矢量图标库的使用方法.mp4 ├28 淘宝网移动端首页开发实战1.mp4 └29 淘宝网移动端首页开发...

    H5+CSS3.zip

    ...语义化标签:段落标签,标签...css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定宽块状元素水平居中设置; 已知宽高实现盒子水平垂直居中; 不知宽高实现盒子水平垂直居中。

    WX_mini-programs:微信小程序

    text 文本标签 image 图片标签 template 模板标签 必须要有name属性 使用 :template is='name\u540d' 如何引入: 组件 import src 引入结构 -- 引入到对应的wxml 引入样式 -- 引入到对应的wxss都必须引入到对应的...

    javascript-mini-projects:wesbos Javascript30项目的源代码-java project source code

    鼓组:事件监听器,css,数据属性,audioHTML。 CSS-Clock :css旋转,暂时关闭过渡,js中的Date()。 CSS-Variables :使用javascript更新CSS变量。 flex-panels :flex-nesting,box-sizing,通用选择器不...

    react-native-tablayout:标签布局或标签导航,您可以在其中通过传递适当的道具来自定义其tabs属性及其指示符

    import {View,Text, Dimensions, SafeAreaView} from ' react-native ' ;import TabLayout from ' react-native-simple-tablayout ' ;const {width}=Dimensions.get( ' window ' ) ;const Screen1=(props)= &gt; { ...

    软件界面设计工具_3款合集

     第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等) 图五、使用UIDesigner制作原型—加入控件  由于UIDesigner具有自动对齐的功能,所以在拖动控件到窗体时就可以完成排版工作,不需要再...

    vTravel:vue-手机站项目

    vue手机A Vue.js project该项目为..._vuex指北Vue 项目里戳中你痛点的问题及解决办法布局flex布局煦涵说CSS:line-clamp深入理解 CSS 属性:touch-action,解决移动端点击事件延迟-webkit-text-size-adjust使用汇总iO

    flexFont.js:Javascript库,用于基于其父元素宽度的自适应字体大小

    script type =" text/javascript " src =" path/to/flexFont.min.js " &gt; &lt;/ script &gt; &lt; script &gt; jQuery ( "#content" ) . flexFont ( ) ; &lt;/ script &gt; 致电flexFont $('。selector')。...

    asp.net知识库

    从NUnit中理解.NET自定义属性的应用(转载) 如何在.NET中实现脚本引擎 (CodeDom篇) .NET的插件机制的简单实现 我对J2EE和.NET的一点理解 难分难舍的DSO(一) InternalsVisibleToAttribute,友元程序集访问属性 ...

Global site tag (gtag.js) - Google Analytics