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

css break long words
css wrap text to next line
mdn word-wrap
css word-break
css word-wrap not working
css don't wrap text
css prevent word-break
css force line break

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.

You can use the <wbr> tag (http://www.quirksmode.org/oddsandends/wbr.html) which lets the browser break whereever you place it.

So your HTML should be:

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>...

You can add this tag on the server-side before you output the HTML.

An alternative is the entity &#8203; which is a zero width space. Sometimes this works better on certain browsers.

CSS word wrap line break on underscores in addition to whitespace , The word-break CSS property is used to specify whether to break lines within words. The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box. 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.

Use CSS

word-break: break-all

jsfiddle - code, result

CSS word wrap / line break on underscores in addition to - html, 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. The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.

It seems you can't use CSS for this purpose currently.

But you can use JavaScript to add <wbr> tags automatically, for example:

var arr = document.getElementsByClassName('filename');
for(var i = 0; i < arr.length; i++) {
  arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>');
}
body { width: 250px; }
<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>

overflow-wrap, Words are never hyphenated at line breaks, even if characters inside the Word wrapping/hyphenation using CSS by Kenneth Auchenberg that will automatically inject soft hyphens and zero-width spaces into your content. Suggesting line break opportunities. There are two Unicode characters used to manually specify potential line break points within text: U+2010 (HYPHEN) The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. U+00AD (SHY) An invisible, "soft" hyphen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary.

Without using JavaScript nor <wbr> you could insert <span> </span> (notice the space) with following CSS:

span{
    width: 0;
    overflow: hidden;
    display: inline-block;
}

The markup:

Here_<span> </span>is_<span> </span>an_<span> </span>example...

hyphens, For example: URL's don't typically have spaces in them, so they. word-break: break-word; /* Adds a hyphen where the word breaks, if supported overflow-​wrap: break-word; makes sure the long string will wrap and not bust out It'll crop to a set number of lines, add an ellipsis, and responsively at that. How can I get Word to treat underscores as spaces or hyphens (i.e. white space) for line wrapping purposes? I am building tables where the text in some of the cells may be something I want to wrap on underscores.

Without HTML5, you can use Javascript to insert <span></span> before or after the characters you want to break on:

//Jquery
$("#id_of_the_container").html(function(index, text) {
    return text.replace(/_/g, "_<span />");
});

//Pure Javascript
var htmlText = document.getElementById("id_of_the_container").innerHTML;
document.getElementById("id_of_the_container").innerHTML = htmlText.replace(/_/g, "_<span />");

then use the CSS class of the container to wrap the words :

.yourClass {
    word-break : break-word;
}

and finally set a zero pixel wide white space as the content before the span :

.yourClass > span:before {
    content: "\200b";
}

$("#set").html(function(index, text) {
  return text.replace(/_/g, "_<span />");
});
.boxes-container > div {
  margin: 5px;
  max-width: 200px;
  border : solid black 2px;
  display: inline-block;
  padding : 5px;
}

.bigger {
  margin-right : 200px !important;
}

.wrap {
  word-break: break-word;
}

.wrap > span:before {
  content : "\200b";
}

.answer-example {
  color : RGB(0, 50, 0);
  border-color: RGB(0, 50, 0) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="boxes-container">
  <div class="bigger">
    Without_Anything,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div class="wrap">
    Without_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div id="set" class="wrap answer-example">
    With_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
</div>

Handling Long Words and URLs (Forcing Breaks , 5.3. Line Breaking Strictness: the line-break property how wrapping interacts with punctuation and symbols. white spaces, or in the middle of words, breaks before certain CJK hyphen-like characters: and no additional rules, line​-break  The CSS settings word-wrap:break-word and text-wrap:unrestricted appear to be CSS 3 features. Good luck finding a way to do this on current implementations. Good luck finding a way to do this on current implementations.

CSS Text Module Level 3, This document defines formatting and style rules for HTML and CSS. in HTML (​like < and & ) as well as control or “invisible” characters (like no-break spaces). <! 3.2.2 HTML Line-Wrapping line should be indented at least 4 additional spaces from the original line. Separate words in ID and class names by a hyphen. The next solution is using word-wrap (overflow-wrap), another property to specify whether or not the browser may break lines within words. Demo.word-wrap {word-wrap: break-word; overflow-wrap: break-word;} Browser support: CSS overflow-wrap is supported in every (at least all I tested and listed on Can I use) browser. Note: Some browsers

Google HTML/CSS Style Guide, In addition to the command line interface, Asciidoctor provides a Ruby API. The adjacent hyphen is not a letter, number, underscore, colon, or semi-colon. In other words, the name cannot contain dots or spaces. when you only want to apply inline AsciiDoc formatting to input text without wrapping it in a block element. The word-break property specifies how words should break when reaching the end of a line. no. Read about animatable. JavaScript syntax: object .style.wordBreak="break-all" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. word-break: normal|break-all|keep-all|break-word|initial

Asciidoctor User Manual, The word-break property specifies how words should break when reaching the end of a The cell itself doesn't show the line break unless you have wrap text applied. An easy way to prevent line breaks using CSS's white-space property. A discretionary line break is similar to a discretionary hyphen, only no hyphen is  With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an "acceptable break" character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do. You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the

Comments
  • Note that this is a new HTML5 tag, might not be 100% supported in all browsers
  • Thanks for your reply. Unfortunately, I can't do any server-side processing of the filenames. I need some way to tell the browser to treat underscores as if they were spaces or hyphens. I was hoping there was some CSS jujitsu I could pull that would allow me to do this. Sort of like <span style="white-space-char:_">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</span>
  • It's not supported by IE8.
  • You've left fairly tight constraints to get the desired output. Without further scripts, or the acceptance of mid-word breaks, this simply isn't possible with just CSS.
  • This will wrap on characters that are not underscores, as well.
  • This does not solve the Issue as this will wrap after each character and not only underscore.
  • <wbr> is valid for HTML5 i need to support IE 8 and above. Hence this solution does not help me. Thanks though .
  • @user, that is fixable for IE, but be sure to add that fix only to IE specific CSS (via conditional comments) as there are reports that zero-width spaces may become full spaces when copying in some cases. But there is no other way to do this in IE as far as I know.