Include long text inside Cytoscape.js nodes

Question

I need to create an oriented graph that simulate a conversation. Is it possible to create such a graph with Cytoscape.js?

I would need something like:

elements: [
  {data: {id: '1', content:'Hi, I am John ...'}},
  {data: {id: '2', content:'Hi, I am Max ...'}},
  {data:{id: '1_2', source: '1', target: '2' }}
],

And then the content to be displayed inside the node:

Answer 1

You first need to set text-wrap to wrap and then you can create multi-line labels by using \n in the label. For example: setting label to Hello\nWorld will be rendered as

Hello World

Here is an example: https://jsbin.com/galokipuqu/1

Also see the documentation for more details.

P.S: Max is the main developer of Cytoscape.js :)