I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments