Possible Duplicate:
CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
Lets say one has the following code:
<div style="width:100px;height:1000px">This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces-This-is-a-long-line-of-text-without-any-spaces</div>
I apologize but stack overflow (according to the preview) does not line break code snippets.
Under most (?) circumstances, the following will cause the container that holds the long line of text to stretch to the full width of the text contained within.
We would like to force this to line break (even mid word) according to the css specified width (width:100px) of the parent container.
Is this possible via a css tag I do not know about?
IE6+ comparability, plus gecko/webkit/opera please.
The <wbr> element If you know where you want a long string to break, then it is also possible to insert the HTML <wbr> element. This can be useful in cases such as displaying a long URL on a page.
You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.
Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Output: Line-break between HTML Elements: The line-break between HTML elements can be added by using CSS properties.
You can use this to wrap :
.wrap { 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 */ }
A combination of word-wrap
and word-break
may solve this for you. See How to force a line break in a loooooong word in a DIV? (possible dupe)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With