I have a bunch of really long file names that cause my HTML formatting to overflow. All of these filenames use underscores instead of spaces and would break/wrap easily if they were spaces. Like this.
Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf
Is there some way to tell CSS to treat underscores in text as if they were whitespace or hyphens, and thus wrap/break on underscores too? Like this.
Here_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf
For my purposes, I cannot use a script to do this. I also don't want to use the word-wrap:break-word trick because that usually doesn't work without also specifying a width. Also, it breaks arbitrarily in the middle of words.
Thanks.
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.
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.
You can use the word-wrap , overflow-wrap , or word-break CSS properties to wrap or break words that would otherwise overflow their container.
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
Use CSS
word-break: break-all
jsfiddle - code, result
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