Proper wordbreaking with CSS and JS

Question

Now, I am working on project where users can create their own time lines. Each timeline has events. There's a problem with event title.

User can create event with very long title. For example:

`12312312312312312312312313211233123213133gsfsfsfsdfserwerwerwerwesdfsdf`

or

День победы русской эскадры под командованием Ф.Ф. Ушакова над турецкой эскадрой у мыса Тендра

Title displays with h3 and word-break:break-all

Examples:

I suppose that for the first example it works well enough. But the second example violates the rules of hyphenation.

Is there any plugin that will help? Or maybe proper CSS rules?

Answer 1

Use in css. there is a difference between to what time to use word-break and word wrap. For more information see the docs and Stackoverflow link

 h3 {
   word-wrap: break-word;
 }

Docs : W3school

Stackoverflow