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
.
Abizern
141k38 gold badges201 silver badges254 bronze badges
asked Sep 23, 2010 at 6:11
3
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
answered Sep 23, 2010 at 8:08
Vinay B RVinay B R
7,8112 gold badges28 silver badges45 bronze badges
9
Please use nowrap and wrap value didn't come for me. nowrap solved the issue.
white-space: nowrap;
Mhmdrz_A
4,4643 gold badges14 silver badges32 bronze badges
answered Nov 15, 2017 at 7:19
CodeCode
1,5042 gold badges23 silver badges37 bronze badges
1
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, 2016 at 10:32
RalphonzRalphonz
6231 gold badge9 silver badges22 bronze badges
0
I had the same problem, I solved it using following css:
.className {
white-space:pre-wrap;
word-break:break-word;
}
answered Jul 3, 2018 at 17:20
sumit dubeysumit dubey
3172 silver badges5 bronze badges
2
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.
answered Sep 23, 2010 at 6:18
Pramendra GuptaPramendra Gupta
14.4k4 gold badges32 silver badges34 bronze badges
4
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
.
answered Feb 12, 2013 at 23:24
Dave SagDave Sag
13k11 gold badges84 silver badges130 bronze badges
0
For me, the parent was smaller than the word. Adding will break on spaces, but not words :
word-break: initial;
answered Jul 18, 2020 at 6:38
Andrew MagillAndrew Magill
1,9983 gold badges19 silver badges28 bronze badges
I use this Code for our website to stop the word-breaking:
body {
-ms-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}
answered Aug 27, 2020 at 19:08
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
answered Aug 2, 2019 at 4:58
sivaharisivahari
271 silver badge6 bronze badges
Word break issue on Firefox browser. So you can use to prevent word-break:
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
tbraun89
2,2563 gold badges28 silver badges44 bronze badges
answered Jan 6, 2020 at 10:27
.className {
hyphens: none;
word-break: keep-all;
}
answered Jun 6 at 13:00
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, 2016 at 9:06
2
This helped me with old Webkit - this one from phantomjs 2.1
.table td {
overflow-wrap: break-spaces;
word-break: normal;
}
answered Dec 8, 2020 at 11:35
AssyKAssyK
371 silver badge6 bronze badges