OrgChartJS Docs

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.

Text overflow with custom binding

In some cases we are binding a function instead of a field. In these cases we will also need the method OrgChart.wrapText to solve the problem with text overflow.

Here is an example of how you can use this method: