I'm trying to build tiles using Cytoscape. Basically, each rectangle (tile) has a title and I want it to be written within the limits of that rectangle.
My code is:
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'
}
}, ///
And:
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' } }
],///
But it seems the text-wrap value isn't being read. I get:
Can anyone help with this?
Thanks in advance!
You've set text-wrap: wrap
so text wrapping is enabled. You haven't specified any rules for how you want the text wrapped. Options:
(1) Use manual newlines (i.e. '\n'
)
(2) Set text-max-width
to the maximum line length, as desired