How can I allow text to wrap inside a word if necessary?
Since there is no definitive answer (depends on your needs, e.g., do you want hyphens, what browsers must you support?), I did some research via Adobe BrowserLab to find out what the options are:
If you do not need hyphens, you will get best compatibility using <wbr>. If you require hyphens, then using is your best bet, but note that this will not work (wrap at char) in Firefox 2.0 Mac/Windows, or Safari 3.0.
And, note that if you choose to not handle long words at all by using overflow, scroll or allowing wrap at a character, both IE6 and IE7 will respond by expanding the container width (at least with the DIV I used), so beware.
Results:
Browser Method Wraps at char Adds Hyphens Overflows horizontally Container expands horizontally
----------------------------------------------------------------------------------------------------------------------------------------------
Firefox 3.0 - Windows XP None No No Yes No
Firefox 3.0 - Windows XP <wbr> Yes No No No
Firefox 3.0 - Windows XP or Yes Yes No No
Firefox 3.0 - Windows XP word-wrap: break-word No No Yes No
IE7 - Windows XP None No No No Yes
IE7 - Windows XP <wbr> Yes No No No
IE7 - Windows XP or Yes Yes No No
IE7 - Windows XP word-wrap: break-word Yes No No No
Firefox 3.0 - OS X None No No Yes No
Firefox 3.0 - OS X <wbr> Yes No No No
Firefox 3.0 - OS X or Yes Yes No No
Firefox 3.0 - OS X word-wrap: break-word No No Yes No
Safari 3.0 - OS X None No No Yes No
Safari 3.0 - OS X <wbr> Yes No No No
Safari 3.0 - OS X or No No No No
Safari 3.0 - OS X word-wrap: break-word Yes No No No
Chrome 3.0 - Windows XP None No No Yes No
Chrome 3.0 - Windows XP <wbr> Yes No No No
Chrome 3.0 - Windows XP or Yes Yes No No
Chrome 3.0 - Windows XP word-wrap: break-word Yes No No No
Firefox 2.0 - OS X None No No Yes No
Firefox 2.0 - OS X <wbr> Yes No No No
Firefox 2.0 - OS X or No No Yes No
Firefox 2.0 - OS X word-wrap: break-word No No Yes No
Firefox 2.0 - Windows XP None No No Yes No
Firefox 2.0 - Windows XP <wbr> Yes No No No
Firefox 2.0 - Windows XP or No No Yes No
Firefox 2.0 - Windows XP word-wrap: break-word No No Yes No
Firefox 3.5 - Windows XP None No No Yes No
Firefox 3.5 - Windows XP <wbr> Yes No No No
Firefox 3.5 - Windows XP or Yes Yes No No
Firefox 3.5 - Windows XP word-wrap: break-word Yes No No No
Firefox 3.5 - OS X None No No Yes No
Firefox 3.5 - OS X <wbr> Yes No No No
Firefox 3.5 - OS X or Yes Yes No No
Firefox 3.5 - OS X word-wrap: break-word Yes No No No
IE6 - Windows XP None No No No Yes
IE6 - Windows XP <wbr> Yes No No No
IE6 - Windows XP or Yes Yes No No
IE6 - Windows XP word-wrap: break-word Yes No No No
IE8 - Windows XP None No No Yes No
IE8 - Windows XP <wbr> Yes No No No
IE8 - Windows XP or Yes Yes No No
IE8 - Windows XP word-wrap: break-word Yes No No No
Safari 4.0 - OS X None No No Yes No
Safari 4.0 - OS X <wbr> Yes No No No
Safari 4.0 - OS X or Yes Yes No No
Safari 4.0 - OS X word-wrap: break-word Yes No No No
Sample HTML:
<html>
<head>
<style>
div {
width: 4em;
border: 1px solid black;
margin-bottom: 6em;
padding: .25em;
}
</style>
</head>
<body>
This is text easily contained by the DIV:
<div>proper width</div>
A long word with no character breaking:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i><wbr></i> tag:
<div>
A<wbr>R<wbr>e<wbr>a<wbr>l<wbr>l<wbr>y<wbr>L<wbr>o<wbr>n<wbr>g<wbr>W<wbr>o<wbr>r<wbr>d<wbr>T<wbr>h<wbr>a<wbr>t<wbr>N<wbr>e<wbr>e<wbr>d<wbr>s<wbr>T<wbr>o<wbr>B<wbr>e<wbr>B<wbr>r<wbr>o<wbr>k<wbr>e<wbr>n A<wbr>n<wbr>d<wbr>A<wbr>n<wbr>o<wbr>t<wbr>h<wbr>e<wbr>r<wbr>W<wbr>o<wbr>r<wbr>d
</div>
<i>­</i> character:
<div>
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>overflow: scroll</i> CSS attribute:
<div style="overflow: scroll">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
<i>word-wrap: break-word</i> CSS attribute:
<div style="word-wrap: break-word">
AReallyLongWordThatNeedsToBeBroken AndAnotherWord
</div>
</body>
</html>
css word wrap that wraps whole word without breaking them?
You don't need to do anything special. Normally the text will break between words.
If that doesn't happen, then
- either the container is too wide
- the container is explicitly set to not break on spaces at all. For instance if it is a
<pre>element, or has the csswhite-space:pre;orwhite-space:nowrap;. - the text contains non-breaking spaces (
Solution: use
white-space: pre-wrap;
It will make the element behave like a pre element, except it also wraps when the line is too long. See also:
http://css-tricks.com/almanac/properties/w/whitespace/
Flutter- wrapping text
In a project of mine I wrap Text instances around Containers. This particular code sample features two stacked Text objects.
Here's a code sample.
//80% of screen width
double c_width = MediaQuery.of(context).size.width*0.8;
return new Container (
padding: const EdgeInsets.all(16.0),
width: c_width,
child: new Column (
children: <Widget>[
new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
],
),
);
[edit] Added a width constraint to the container
How can I wrap or break long text/word in a fixed width span?
You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.
span { display:block; width:150px; word-wrap:break-word;}<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>How do I wrap text in a pre tag?
The answer, from this page in CSS:
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
How can I use word-wrap inside a table?
You want to use td { word-break: break-all;} instead
td { word-break: break-all;}<table border="1" style="width:100%"> <tr> <td>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</td> <td>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</td> </tr></table>Is there a way to word-wrap long words in a div?
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 <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
I've used this class for a bit now, and works like a charm. (note: I've only tested in FireFox and IE)
Related Topics
CSS Animation from Left to Right
HTML Span Align Center Not Working
How to Color Table Columns Using CSS Without Coloring Individual Cells
How to Get Rid of an Element's Offset Using CSS
Stacking Divs from Bottom to Top
Indent Starting from The Second Line of a Paragraph with CSS
How to Add Placeholder in Div Tag
Improving CSS3 Transition Performance
CSS Vertically Align Floating Divs
Trying to Align HTML Button at The Center of The My Page
Chrome Slow Scrolling with Fixed Position Elements
Keep Padding from Making The Element Bigger
Content of Div Is Longer Then Div Itself When Width Is Set to 100%
Can Data-* Attribute Contain HTML Tags
How to Make My Navi-Bar The Same Across My HTML
CSS Attribute Selector for Input Type="Button" Not Working on Ie7