如何使用 Cytoscape 将文本包裹在一个形状内?
How to wrap the text inside a shape using Cytoscape?
我正在尝试使用 Cytoscape 构建图块。
基本上,每个矩形(瓷砖)都有一个标题,我希望它写在该矩形的范围内。
我的代码是:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
css: {
'shape': 'rectangle',
'width': '200',
'height': '150',
'content': 'data(name)',
'text-wrap': 'wrap',
'text-valign': 'center',
'text-halign': 'center',
'text-transform': 'uppercase'
}
}, ///
并且:
elements: {
nodes: [
{ data: { id: 'F1', name: 'This is my very long text long text long text long text long text long text long text'} },
{ data: { id: 'F2' } },
{ data: { id: 'c', parent: 'b' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f', parent: 'e' } }
],///
但似乎没有读取 text-wrap 值。我得到:
有人可以帮忙吗?
提前致谢!
您已设置 text-wrap: wrap
,因此启用了文本换行。您还没有为如何 指定文本换行的任何规则。选项:
(1) 使用手动换行符(即 '\n'
)
(2) 根据需要将text-max-width
设置为最大行长度
我正在尝试使用 Cytoscape 构建图块。 基本上,每个矩形(瓷砖)都有一个标题,我希望它写在该矩形的范围内。
我的代码是:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
css: {
'shape': 'rectangle',
'width': '200',
'height': '150',
'content': 'data(name)',
'text-wrap': 'wrap',
'text-valign': 'center',
'text-halign': 'center',
'text-transform': 'uppercase'
}
}, ///
并且:
elements: {
nodes: [
{ data: { id: 'F1', name: 'This is my very long text long text long text long text long text long text long text'} },
{ data: { id: 'F2' } },
{ data: { id: 'c', parent: 'b' } },
{ data: { id: 'd' } },
{ data: { id: 'e' } },
{ data: { id: 'f', parent: 'e' } }
],///
但似乎没有读取 text-wrap 值。我得到:
有人可以帮忙吗?
提前致谢!
您已设置 text-wrap: wrap
,因此启用了文本换行。您还没有为如何 指定文本换行的任何规则。选项:
(1) 使用手动换行符(即 '\n'
)
(2) 根据需要将text-max-width
设置为最大行长度