Menu
I'm trying to determine whether it's possible to create css for an element that supports word-wrap:break-word, but that also expands to take the width of its children when breaking is not possible.
<html>
<style>
.outer {
background-color:red;
word-wrap:break-word;
}
</style>
<div class="outer">
User generated content:
<a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
<table>
<tr>
<td>asdfasdfadsffdsasdfasdfsadfafsd</td>
<td>asdfasdfadsffdaasdfassdffaafasds</td>
</tr>
</table>
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>
</html>
In the above sample, the url breaks properly, but the table and img overflow the red outer div if the window becomes narraower than the table.
If I make the outer div display:inline-block or display:table, the red outer div correctly expands to include the content, but the url doesn't break if the window is narrower than the url.
I only need this to work in WebKit (on Android), and I'm trying to find a CSS only (no Javascript) solution if possible.
455
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
Use the default line break rule. To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text). Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal .
You can do this easily with a div by giving it the style word-wrap: break-word (and you may need to set its width, too). However, for tables, you also need to apply: table-layout: fixed .
The word-break property in CSS can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.
If I understood what you need correctly, all you need is overflow: auto set on .outer. Here's an example: http://jsfiddle.net/hgLbh/1/ (tested on safari & chrome).
Update:
After your scrolling related comment I've tried a few other solutions and I've found something that satisfies even that. I'll say in advance it's dirty, but if you can handle absolutely positioned content and you are willing to duplicate the generated markup I hope it will work (at least on my local safari it does).
The solution is to duplicate your content and wrap the new content in 2 other divs, so the HTML will look something like:
<div class="outer-fixed">
<div class="just-a-helper-wrapper">
... user generated content
</div>
</div>
<div class="outer">
... same user generated content
</div>
And for the CSS:
.outer,
.outer-fixed {
background-color:red;
word-wrap:break-word;
position: absolute;
left: 0;
right: 0;
}
.outer-fixed {
position: fixed;
right: 0;
}
.outer-fixed * {
visibility: hidden;
}
I'd like to point out that the just-a-helper-wrapper is required only because outer-fixed * doesn't select text nodes (ie. content that's not in another tag) - for example the string User generated content: from your example would have still been visible. If you don't actually have that kind of content, you can remove it.
Here's the link: http://jsfiddle.net/hgLbh/2/
187
Assigning width: 100%; and using table-layout: fixed; forces the td cells to fit the table and will allow for text wrapping.
table {
width:100%;
table-layout:fixed
}
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
