OrgChart JS Documentation

Text Overflow

The text-overflow template field attribute specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or multiline. If the text-overflow is set to ellipsis the entire text is shown on hover.

Both of the attributes are required for text-overflow:

  • text-overflow
  • width

Clipped field - text-overflow="ellipsis"

        OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.olivia);
        OrgChart.templates.myTemplate.field_0 = 
            '<text width="230" text-overflow="ellipsis" style="font-size: 24px;" fill="#757575" x="125" y="100" text-anchor="middle">{val}</text>';

Multiline field - text-overflow="multiline"

        OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.olivia);
        OrgChart.templates.myTemplate.field_1 = 
            '<text width="230" text-overflow="multiline" style="font-size: 16px;" fill="#757575" x="125" y="30" text-anchor="middle">{val}</text>';        

Here is the result

The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.