Menu
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?
895
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
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
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
