如何使用tspan拆分Ext.draw.text中的长文本
How to split long text in Ext.draw.Text using tspan
我使用Ext.draw.Text为Ext图表创建了一个自定义图例面板……在我的应用程序中,图例可能有很长的自定义文本。所以我需要用一个固定的长度把它们分开。一种方法是使用Javascript分割文本,并为文本的每个部分创建文本精灵。
有其他方法可以在Ext.draw.text中拆分文本吗?
代码:
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. Can i split this into two tspan",
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
提前感谢。
通过在文本内容中插入换行符('''n'),我成功地为Ext.draw.text
生成了多个tspan。JSFiddle
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. 'n Can i split this into two tspan", //Added new line character
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
相关文章:
- 在文本区域中使用jQuery.text()保持换行符
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- 如何使用tspan拆分Ext.draw.text中的长文本
- text()显示双文本
- 使用图像而不是文本(script type=“text/javascript”)
- jquery text()删除html标记并合并文本
- 将换行符添加到.text内容文本
- 将文本插入<text区域>
- Kendo UI-将Text()括起来的文本转换为<span>编码HTML
- 获取选定的li文本和设置菜单'it’s text with it
- 无法使用 jQjery 从文本编辑器 (jQuery Text Edior) 获取值
- jQuery.text() - 如何在不影响任何子元素的情况下更改标签的文本
- .text 未获取所有文本,但在控制台中工作
- .text() 给出元素中的所有文本元素
- 使用 html() 或 text() 方法返回格式化文本
- text未阅读所有文本的内容
- "text长度"Internet Explorer中svg文本元素悬停时的更改
- 滚动视图中text区域的滚动文本
- 当文本与元素一起悬停时发生更改时,onclick事件的Grab Text
- 如何在<text区域>当段落和文本动态地围绕URL时