To resolve this issue, I replaced the element with an SVG element, allowing HTML/CSS to properly render and style the title.

Steps Taken

1. Identified the Problem

• Found that the title was rendered using an SVG element, which does not support automatic text wrapping.

2.Introduced for Wrapping

Replaced the element with to enable proper wrapping using HTML/CSS.
Updated Code:

if (title) {
  const foreignObject = svg
    .append('foreignObject')
    .attr('x', LEFT_MARGIN) // Adjust position as needed
    .attr('y', TOP_MARGIN) // Adjust vertical position as needed
    .attr('width', diagramWidth - LEFT_MARGIN * 2) // Set width
    .attr('height', WRAPPING_HEIGHT); // Define height for wrapping

  foreignObject
    .append('xhtml:div') // Use xhtml namespace for HTML inside SVG
    .style('font-size', `${conf.fontSize || '16px'}`)
    .style('word-wrap', 'break-word')
    .style('white-space', 'normal')
    .style('text-align', 'center')
    .text(title);
}

3. Applied CSS Styling for Wrapping

• word-wrap: break-word; Ensures long words break into multiple lines.
• white-space: normal; Allows natural line breaks.
• text-align: center; Centers the title for better readability.

4. Tested with Long Titles

Used a long title example to ensure proper wrapping and confirm that the timeline diagram remains unaffected.
Screenshots

Mermaid Version: 11.4.1

Great work on addressing the title wrapping issue! The fix makes a big improvement in readability.

I have a small suggestion to further enhance the title styling for better emphasis. Currently, the title blends in with other text, making it less prominent in the diagram. To improve readability and presentation, the title could:

• Be larger (e.g., 24px or more).
• Be bold (font-weight: bold).
• Be center-aligned properly.

This small tweak would make titles stand out better.

Hi @nourhenta 👋

Thanks for raising this issue! I’ve submitted a fix #6405 that ensures long timeline titles are properly wrapped using an SVG containing a styled XHTML