101
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.

3
  • 9
    What do you suppose "break-word" means? Commented Sep 23, 2010 at 18:12
  • 1
    I knew that, but I say "Is there another way".
    – Joshua
    Commented Sep 23, 2010 at 18:49
  • alas word-wrap: normal; doesn't help. Nor does white-space: wrap; alone help if you are trying to wrap words in a table cell (my situation).
    – Dave Sag
    Commented Feb 12, 2013 at 23:17

16 Answers 16

104

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

9
  • 1
    Nope, still nothing. This code still displays the full text with horizontal scrollbar. body { width: 768px; white-space: wrap;}
    – Joshua
    Commented Sep 23, 2010 at 15:19
  • 6
    wrap is an invalid property value Commented Aug 25, 2016 at 8:30
  • 6
    This should not be the correct answer, white-space: wrap; isn't a valid property value Commented May 4, 2017 at 13:03
  • 8
    It's white-space: nowrap actually.
    – AlexioVay
    Commented Dec 17, 2017 at 12:46
  • 1
    1: This doesn't work. 2: Terrible screenshot - don't bother next time if this is the quality. Better: Just post a jsfiddle, or online debugger next time. It would have shown you (and everyone else) this doesn't work as you describe. Example of how this does NOT work: jsfiddle.net/9dfpyvxk -> You really think adjusting the "global" BODY WIDTH is a feasible fix for this? BODY WIDTH affects entire page.
    – B. Shea
    Commented Apr 18, 2022 at 16:40
35

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

.className {
  white-space:pre-wrap;
  word-break:break-word;
}
1
  • 3
    Third answer is the one that actually answers the question. Both accepted and second answer will cause the text to not wrap at all. Commented Sep 11, 2023 at 14:23
34

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

white-space: nowrap;
1
  • 33
    This prevents a word from breaking - but it also prevents the whole line of text from breaking.
    – heytricia
    Commented Jul 10, 2019 at 0:22
30

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;
}
0
7

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.

4
  • None of the examples you gave me actually work, the only one that does is word-wrap.
    – Joshua
    Commented Sep 23, 2010 at 6:31
  • alternative is {overflow: hidden;} and {overflow: auto;} but there is a problem to that as well. Commented Sep 23, 2010 at 6:39
  • Yeh, but that isn't what I'm looking for as overflow: hidden; would hide everything off the edge. :/
    – Joshua
    Commented Sep 23, 2010 at 7:01
  • This does not answer the question - which is how to prevent word breaks.
    – heytricia
    Commented Jul 10, 2019 at 0:21
5

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

    word-break: initial;
4

To stop words from breaking, you should unset word-break. The default is normal, which allows word breaks but at break points.

overflow-wrap controls when word breaks happen.

You should instead set the overflow-wrap property to always to break words only when they are too long to fit on a line (instead of overflowing).

The default normal to disable word breaks, allowing words too long to overflow the edge of the element.

If your element width is flexible (e.g. min-width, or display:flex), and you want too expand the element instead of line breaking, you can use the value break-word.

The property word-break determines whether words should only break at break points, or always (when they could overflow).

Helpful info and demo on overflow-wrap - MDN Web Docs

Info on word-break

Further things:

  • If you want to disable all word breaks, even when it can't line break, i.e. japanese text, you can use the word-break: keep-all
  • *The value break-word may have been unsupported and is now deprecated, as is the word-wrap CSS property (initially added by MS for this same function).
1
  • This was very helpful for a project in which the prior developers applied this CSS rule to the body element without me realizing it.
    – KOVIKO
    Commented Dec 6, 2023 at 17:46
2

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.

0
1

Use white-space: nowrap;

CSS white-space Property

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Know more about white-space example

1

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

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
0
1

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

body {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}
0
.className {
    hyphens: none;
    word-break: keep-all;
}
1
  • 6
    Please add supporting details to your answer to improve it.
    – Ethan
    Commented Jun 6, 2022 at 14:53
0

What worked for me was setting overflow-wrap to normal:

overflow-wrap: normal;
0
    word-wrap: normal;

That did it for me. No more mid-word breaking to the next line.

-1

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

2
  • 4
    There's no break-word value for word-break property.
    – Alex M
    Commented Aug 12, 2016 at 9:20
  • This does not answer the question - which is how to prevent word breaks.
    – heytricia
    Commented Jul 10, 2019 at 0:25
-1

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.