A long string is truncated at the end in a Plan Sub Menu

[Akira Tsuchiya]

Take a look at the attached image.

A long string is truncated at the end in a Plan Sub Menu.

I want a hirizontal scroll bar is displayed in a Plan Sub Menu for displaying too long a string.

How can I do that?

[Jason B · Accepted solution]

Put your content in a containing element, and on that containing element use the following CSS to trigger scrollbars when the content is too long:

overflow: auto;

Generally it's more ideal for the content to wrap, however, as horizontal scrollbars can present some UX issues (e.g. if your content is long it's not immediately obvious that there's a horizontal scrollbar because it will appear right down at the bottom of your content, possibly off-screen).

To force unbreakable content to wrap you can use:

word-wrap: break-word;