Text Overflow

The data-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 data-text-overflow is set to ellipsis the entire text is shown on hover.

Both of the attributes are required for data-text-overflow:

• data-text-overflow
• data-width

Clipped field: data-text-overflow="ellipsis"

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

Multiline field: data-text-overflow="multiline"

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

All options for data-text-overflow attribute are:

• ellipsis adds ellipsis if the fileld is more then defined data-width
• multiline splits the text into multiline
• multiline-2 splits the text into 2 lines
• multiline-3 splits the text into 3 lines
• multiline-n splits the text into n lines
• multiline-2-ellipsis splits the text into 2 lines and adds ellipsis at the end
• multiline-3-ellipsis splits the text into 3 lines and adds ellipsis at the end
• multiline-n-ellipsis splits the text into n lines and adds ellipsis at the end

Here is the result

Edit in BALKAN Code

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 "field" event

In some cases we change a field using the "field" event. 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:

Edit in BALKAN Code