Search code examples
cssangulartextwidthcytoscape.js

Text width cut off cytoscape

I am facing a text cut off problem below my node in cytoscape.

i have played around with the css but the text is still cut off.

export const styles = [
  {
    selector: 'node',
    style: {
      label: 'data(label)',
      width: 'mapData(weight, 40, 80, 20, 60)',
      height: 'mapData(weight, 40, 80, 20, 60)',
      content: 'data(name)',
      'background-color': 'data(colorCode)',
      color: '#262626',
      'font-size': 15
    }
  },
  {
    selector: ':selected',
    style: {
      'border-width': 1,
      'border-color': 'black',
      'font-size': 17
    }
  },

{
    selector: '.bottom-center',
    style: {
      'text-valign': 'bottom',
      'text-halign': 'center'
    }
  }

Example:

The text "12 - Test user is doing good" is placed below the node but cuts off like this: "- Test user is doin"

Solution

  • my bad, had to use 'wrap' for text in styling and it did the job