Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS word wrap / line break on underscores in addition to whitespace and hyphens

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.

like image 720
dsmtoday Avatar asked Jun 11 '11 15:06

dsmtoday


People also ask

How do you break words with a hyphen in CSS?

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.

How do I wrap text to the next line in CSS?

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.

Can I use overflow-wrap break word?

You can use the word-wrap , overflow-wrap , or word-break CSS properties to wrap or break words that would otherwise overflow their container.

What is word-wrap property in CSS?

The word-wrap property allows long words to be able to be broken and wrap onto the next line.


1 Answers

Use CSS

word-break: break-all

jsfiddle - code, result

like image 54
hackhowtofaq Avatar answered Sep 24 '22 10:09

hackhowtofaq