Stop word-wrap dividing words

Css Problem Overview

body { word-wrap: break-word;}

I've been using that code (above) to fit the text in the body into it's container. However what I don't like about it, is that it breaks up words.

Is there another way where it will not break up words and only line break after or before a word?

EDIT: This is for use within a UIWebView.

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

May be a bit late but you can add this css to stop word breaks:

.element {
    -webkit-hyphens: none;
    -moz-hyphens:    none;
    -ms-hyphens:     none;
    hyphens:         none;
}

Solution 3 - Css

Please use nowrap and wrap value didn't come for me. nowrap solved the issue.

white-space: nowrap;

Solution 4 - Css

I had the same problem, I solved it using following css:

.className {
  white-space:pre-wrap;
  word-break:break-word;
}

Solution 5 - Css

You can try this...

body{
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

{word-wrap:;} is an IE proprietary property, and not a part of css. firefox's handling is correct. Unfortunately, FF does not support a soft hyphen / . so that's not an option. You could possibly insert a hair or thin space, / (check me on the numeric entity) and / , respectively.

Making {overflow: hidden;} would cut the overflow off, and {overflow: auto;} would cause the overflow to enable scrolling.

Solution 6 - Css

In my situation I am trying to ensure words wrap at proper word-breaks within table cells.

I found I need the following CSS to achieve this.

table {
  table-layout:fixed;
}
td {
  white-space: wrap;
}

also check that nothing else is changing word-break to break-word instead of normal.

Solution 7 - Css

For me, the parent was smaller than the word. Adding will break on spaces, but not words :

    word-break: initial;

Solution 8 - Css

I use this Code for our website to stop the word-breaking:

body {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}

Solution 9 - Css

Use white-space: nowrap;

CSS white-space Property

Know more about white-space example

Solution 10 - Css

Word break issue on Firefox browser. So you can use to prevent word-break:

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;

Solution 11 - Css

I faced a similar problem in my grid structure and I used, word-break: break-word; in my grid and my issue got resolved.

Solution 12 - Css

This helped me with old Webkit - this one from phantomjs 2.1

.table td {
    overflow-wrap: break-spaces;
    word-break: normal;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Joshua	View Question on Stackoverflow
Solution 1 - Css	Vinay B R	View Answer on Stackoverflow
Solution 2 - Css	Ralphonz	View Answer on Stackoverflow
Solution 3 - Css	Code	View Answer on Stackoverflow
Solution 4 - Css	sumit dubey	View Answer on Stackoverflow
Solution 5 - Css	Pramendra Gupta	View Answer on Stackoverflow
Solution 6 - Css	Dave Sag	View Answer on Stackoverflow
Solution 7 - Css	Andrew Magill	View Answer on Stackoverflow
Solution 8 - Css	Web Gemacht	View Answer on Stackoverflow
Solution 9 - Css	sivahari	View Answer on Stackoverflow
Solution 10 - Css	Vaishali Chauhan	View Answer on Stackoverflow
Solution 11 - Css	Abishek	View Answer on Stackoverflow
Solution 12 - Css	AssyK	View Answer on Stackoverflow