Stop Word-Wrap Dividing Words

Stop word-wrap dividing words

use white-space: nowrap;. If you have set width on the element on which you are setting this it should work.

update -
rendered data in Firefox
alt text

how to turn off the break word in css?

Use white-space: nowrap

p {
    white-space: nowrap;
}

If you want use nowrap on only part of a text, you can simply put that text in a span element and then apply nowrap to it.

Another much simpler way to prevent just your hyphenated string from wrapping is to replace the keyboard hyphen with ‑. This will render it as a non-breaking hyphen.

Updated example on jsFiddle

csscss3html

css word wrap that wraps whole word without breaking them?

You don't need to do anything special. Normally the text will break between words.

If that doesn't happen, then

either the container is too wide
the container is explicitly set to not break on spaces at all. For instance if it is a <pre> element, or has the css white-space:pre; or white-space:nowrap;.
the text contains non-breaking spaces ( ) instead of normal spaces.

Solution: use

white-space: pre-wrap;

It will make the element behave like a pre element, except it also wraps when the line is too long. See also:
http://css-tricks.com/almanac/properties/w/whitespace/

Stop word from being split up

you can use

word-break: keep-all;

<div style="width:200px;margin:0 auto;word-break:keep-all;background:#ccc;padding:0px 5px;">

    <h2>

        The Clore Prize <span style="text-decoration: underline; color: rgb(247, 147, 30);">i</span>mag<span style="text-decoration: underline; color: rgb(85, 81, 163);">i</span>nat<span style="text-decoration: underline; color: rgb(238, 65, 34);">i</span>on lab

    </h2>

</div>

How to turn off word wrapping in HTML?

You need to use the CSS white-space attribute.

In particular, white-space: nowrap and white-space: pre are the most commonly used values. The first one seems to be what you 're after.

How to prevent long words from breaking my div?

Soft hyphen

You can tell browsers where to split long words by inserting soft hyphen ():

averyverylongword

may be rendered as

averyverylongword

averyvery-

longword

A nice regular expression can ensure you won't be inserting them unless neccessary:

/([^\s-]{5})([^\s-]{5})/ → $1$2

Browsers and search engines are smart enough to ignore this character when searching text, and Chrome and Firefox (haven't tested others) ignore it when copying text to clipboard.

`<wbr>` element

Another option is to inject <wbr>, a former IE-ism, which is now in HTML5:

averyvery<wbr>longword

Breaks with no hyphen:

averyvery

longword

You can achieve the same with zero-width space character (or ).

FYI there's also CSS hyphens: auto supported by latest IE, Firefox and Safari (but currently not Chrome):

div.breaking {
  hyphens: auto;
}

However that hyphenation is based on a hyphenation dictionary and it's not guaranteed to break long words. It can make justified text prettier though.

Retro-whining solution

<table> for layout is bad, but display:table on other elements is fine. It will be as quirky (and stretchy) as old-school tables:

div.breaking {
   display: table-cell;
}

overflow and white-space: pre-wrap answers below are good too.

word-wrap: break word; fix or alternative

As @Sfili_81 mentionned it

something like word-break: break-all;

Here you go

var txt = document.getElementById("demo").innerHTML;

var dataArr = txt.split(' ');

var paragraph = document.getElementById("demo");
var finalString = "";
for (var i = 0; i < dataArr.length; i++){
    if (dataArr[i].length > 6 ) {
      finalString = finalString + " <span>"+ dataArr[i]+"</span>"; 
  }
  else{
    finalString = finalString + " " + dataArr[i];
  }
}

paragraph.innerHTML = finalString;

div{
  width:50px;
  background: red;
 
}
span{
  word-break:break-all;
}

<div id="demo">test tStop word-wrap dividing words how to turn off the break word in css? css word wrap that wraps whole word without breaking them? Stop word from being split up How to tureeest test test test</div>

Word wrap without breaking words

Try adding this additional property:

white-space: pre-line;
word-wrap: break-word;

See this reference for explanation of possible values: http://www.w3schools.com/cssref/pr_text_white-space.asp

Stop Word-Wrap Dividing Words