Stop word-wrap dividing words

Question

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.

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, Feb 12 '13 at 23:17

score 86 · Accepted Answer · edited Dec 22 '20 at 08:19

86

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

edited Dec 22 '20 at 08:19

Panagiotis Panagi

9,927
7
55
103

answered Sep 23 '10 at 08:08

Vinay B R

8,089
2
30
45

1

Nope, still nothing. This code still displays the full text with horizontal scrollbar. `body { width: 768px; white-space: wrap;}` – Joshua Sep 23 '10 at 15:19
just setting width takes care of wrapping the text a you need(atleast on firefox). can you check behaviours on specific browsers and update the post – Vinay B R Sep 23 '10 at 18:06
i have updated my answer to include rendered result on firefox. – Vinay B R Sep 23 '10 at 18:13
This still does not work for me, I've edited my question to say what browser this is for. – Joshua Sep 23 '10 at 18:52
Actually got it working now! Was accidentally overriding the width without noticing! – Joshua Sep 25 '10 at 15:36
6

wrap is an invalid property value – Claudiu Creanga Aug 25 '16 at 08:30
6

This should not be the correct answer, `white-space: wrap;` isn't a valid property value – user1486133 May 04 '17 at 13:03
7

It's `white-space: nowrap` actually. – AlexioVay Dec 17 '17 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: https://jsfiddle.net/9dfpyvxk/ -> You really think adjusting the "global" BODY WIDTH is a feasible fix for this? BODY WIDTH affects entire page. – B. Shea Apr 18 '22 at 16:40

score 30 · Answer 2 · edited Sep 18 '21 at 15:33

30

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

white-space: nowrap;

edited Sep 18 '21 at 15:33

Mechanic

5,015
4
15
38

answered Nov 15 '17 at 07:19

Code

1,574
2
23
37

26

This prevents a word from breaking - but it also prevents the whole line of text from breaking. – heytricia Jul 10 '19 at 00:22

score 24 · Answer 3 · answered Jul 27 '16 at 10:32

24

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

answered Jul 27 '16 at 10:32

Ralphonz

633
1
9
22

score 24 · Answer 4 · edited Jul 03 '18 at 17:37

24

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

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

edited Jul 03 '18 at 17:37

The_Black_Smurf

5,178
14
52
78

answered Jul 03 '18 at 17:20

sumit dubey

377
2
5

score 7 · Answer 5 · answered Sep 23 '10 at 06:18

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, &hairsp;/ (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.

answered Sep 23 '10 at 06:18

Pramendra Gupta

14,667
4
33
34

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

score 4 · Answer 6 · answered Jul 18 '20 at 06:38

4

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

    word-break: initial;

answered Jul 18 '20 at 06:38

Andrew Magill

2,254
4
21
28

score 2 · Answer 7 · answered Feb 12 '13 at 23:24

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.

score 1 · Answer 8 · answered Aug 02 '19 at 04:58

1

Use white-space: nowrap;

CSS white-space Property

Know more about white-space example

answered Aug 02 '19 at 04:58

sivahari

37
1
6

score 1 · Answer 9 · edited Jan 06 '20 at 12:43

1

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

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

edited Jan 06 '20 at 12:43

tbraun89

2,246
3
25
44

answered Jan 06 '20 at 10:27

Vaishali Chauhan

29
1

The only answer that worked for me – Mike Jul 19 '23 at 12:57

score 1 · Answer 10 · answered Aug 27 '20 at 19:08

1

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

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

answered Aug 27 '20 at 19:08

Web Gemacht

19
1

tutacat · Answer 11 · 2023-01-24T10:42:19.193

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

score -1 · Answer 12 · answered Aug 12 '16 at 09:06

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

answered Aug 12 '16 at 09:06

Abishek

1

4

There's no `break-word` value for `word-break` property. – Alex M Aug 12 '16 at 09:20
This does not answer the question - which is how to prevent word breaks. – heytricia Jul 10 '19 at 00:25

score -1 · Answer 13 · answered Dec 08 '20 at 11:35

-1

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

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

answered Dec 08 '20 at 11:35

AssyK

37
1
6

score -1 · Answer 14 · answered Jun 06 '22 at 13:00

-1

.className {
    hyphens: none;
    word-break: keep-all;
}

answered Jun 06 '22 at 13:00

Majevski

1

6

Please add supporting details to your answer to improve it. – Ethan Jun 06 '22 at 14:53

Stop word-wrap dividing words

14 Answers14

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

Linked

Stop word-wrap dividing words

14 Answers14

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

Linked

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