Is there a way to word-wrap long words in a div?
I know Internet Explorer has a word-wrap style, but I’d like to know if there is a cross-browser method of doing so to text in a div. Preferably CSS but JavaScript snippets would work ok too. I’m referring to long strings.
6 Answers 6
Reading the original comment, rutherford is looking for a cross-browser way to wrap unbroken text (inferred by his use of word-wrap for IE, designed to break unbroken strings).
/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */ .wordwrap < white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)
Word-wrap: break-word although created by Microsoft is now is part of the CSS 3 standard and is what does the trick 🙂
Most of the previous answer didn't work for me in Firefox 38.0.5. This did.
Aaron Bennet's solution is working perfectly for me, but i had to remove this line from his code --> white-space: -pre-wrap; beacause it was giving an error, so the final working code is the following:
Hi, as you can see if you read both answers again, what i am saying is just that Aaron's solution is ok, but i was getting an error in one of the lines he wrote, so i just changed it to the solution that worked for me. Maybe i should have comment in his answer, i know it, sorry & thanks
As david mentions, DIVs do wrap words by default.
If you are referring to really long strings of text without spaces, what I do is process the string server-side and insert empty spans:
thisIsAreallyLongStringThatIWantTo BreakToFitInsideAGivenSpace It's not exact as there are issues with font-sizing and such. The span option works if the container is variable in size. If it's a fixed width container, you could just go ahead and insert line breaks.
How to word wrap text in HTML?
How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div (say 200px ) be wrapped? I am open to any kind of solution such as CSS, jQuery, etc.
20 Answers 20
It's CSS3, but it works in almost all mainstream browsers, including IE5.5 -> 9 - caniuse.com/#search=word-wrap
@redochka But when using word-break: break-all; then in normal text it breaks words in the middle, which is ugly. Can't we have a mix of both behaviors ?
On bootstrap 3, make sure the white-space is not set as 'nowrap'.
Great. I tried using word-break: break-all on a Twitter Bootstrap 3 panel body but it never worked. Adding white-space:normal was the fix.
You can use a soft hyphen like so:
aaaaaaaaaaaaaaa- aaaaaaaaaaaaaaa if the containing box isn't big enough, or as
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa You put it into long words where they may be split. You can even get that information automatically from a suitable dictionary.
But how about gibberish like the one in the example? Is it ok to turn aaaaaa. aaaaa into aaaaaaa. aaaa ?
this works fine if the word to be wrapped is an overly.long.java.package.name or some similar string with many dots. then you can add the after each dot.
The ' word-wrap ' solution only works in IE and browsers supporting CSS3 .
The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity This entity breaks the long words nicely, and works on all browsers.
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "place inside them in regular intervals the html entity #8203" but then when you try to copy the text and paste it somewhere, you'll have a random Unicode character in the middle
word-wrap: normal; word-break: break-all; white-space: normal; display: block; height: auto; margin: 3px auto; line-height: 1.4; -webkit-line-clamp: 1; -webkit-box-orient: vertical; The only one that works across IE, Firefox, chrome, safari and opera if there are no spaces in the word (such as a long URL) is:
I found this to be bullet-proof.
Another option is also using:
This will set all your div elements in all browsers that support CSS1 (which is pretty much all common browsers as far back as IE 8)
If you have a
element you want to have word wrapping, this works and word-break or word-wrap don't.
Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof
Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
background-size: auto; table-layout: fixed; Wrapping and breaking text
This guide explains the various ways in which overflowing text can be managed in CSS.
What is overflowing text?
In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.
CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of overflow is visible , and we can see the overflowing text. It is generally better to be able to see overflow, even if it is messy. If things were to disappear or be cropped as would happen if overflow was set to hidden you might not spot it when previewing your site. Messy overflow is at least easy to spot, and in the worst case, your visitor will be able to see and read the content even if it looks a bit strange.
In this next example, you can see what happens if overflow is set to hidden .
Finding the min-content size
To find the minimum size of the box that will contain its contents with no overflows, set the width or inline-size property of the box to min-content .
Using min-content is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.
Breaking long words
If the box needs to be a fixed size, or you are keen to ensure that long words can't overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.
Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap . The word-wrap property is now treated by browsers as an alias of the standard property.
An alternative property to try is word-break . This property will break the word at the point it overflows. It will cause a break-even if placing the word onto a new line would allow it to display without breaking.
In this next example, you can compare the difference between the two properties on the same string of text.
This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.
In the example below there is a checkbox and label. Let's say, you want the label to break should it be too long for the box. However, you don't want it to break directly after the checkbox.
Adding hyphens
To add hyphens when words are broken, use the CSS hyphens property. Using a value of auto , the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. To have some control over the process, use a value of manual , then insert a hard or soft break character into the string. A hard break ( ‐ ) will always break, even if it is not necessary to do so. A soft break ( ) only breaks if breaking is needed.
You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line (before the hyphenation line break).
This property also takes the value auto , which will select the correct value to mark a mid-word line break according to the typographic conventions of the current content language.
The element
In the below example the text breaks in the location of the .
See also
- The HTML element
- The CSS word-break property
- The CSS overflow-wrap property
- The CSS white-space property
- The CSS hyphens property
- Overflow and Data Loss in CSS
Found a content problem with this page?
This page was last modified on May 25, 2023 by MDN contributors.
Your blueprint for a better internet.