fix: #823

[FistMeNaruto]

Summary

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:
Before:

After:

Before:

After:

Before:

After:

Does this PR introduce a breaking change? (check one)

• Yes
• No (hopefully)

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox (long words do not break nav bar, but still introduce overflow-x; also word-break: break-word; does not work on Firefox, therefore menu links still oveflow, but overflow is hidden)
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

Some information about the css properties used:
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

[ekoeryanto]

I think we should use the specific tags selector instead of body

[FistMeNaruto]

Generally I would agree with that, but in this case body targets both the content and menu. I don't see any case where long word breaking would introduce unwanted effects. But yes, specific tags can be used here aswell.

[ulivz]

Thanks for your contribution, but I don't think it should be added by default. users should be able to know when has his words been overlapped and there is almost no such long word in English.

[FistMeNaruto]

I have brought this up mainly because I had an issue with a long URL in my own project (see first two pictures) and it introduced scroll overflow. I think it is relatively common to have URLs in text and it does make sense to break them in case they overflow.