7

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!

Page

1 Answers1

5

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

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • 1
    Can we set dynamic values? Node sizes might change. I don't want to put hardcoded values like 100px – canbax Dec 05 '19 at 07:32
  • 1
    Every property is mappable. – maxkfranz Dec 06 '19 at 13:06
  • How can I map from text length? I tried `"text-max-width": "mapData(title.length, 0, 100, 0px, 100px)"` it seems like not working – canbax Dec 13 '19 at 08:26
  • @maxkfranz What if I want to wrap a text that does not have any newlines? I am trying to use "'text-max-width': 1, 'text-overflow-wrap': 'anywhere',", but failing miserably for hours. – codertryer Jan 28 '21 at 14:06