homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
max-width and word-wrap
Readie




msg:4482568
 12:47 pm on Aug 7, 2012 (gmt 0)

Hi there,

Having a bit of an annoying issue with word wrapping. Basically, I have the following HTML:

<div class="medusa-tooltip">
<div class="medusa-tooltip-header">Matching scope</div>
<div class="medusa-tooltip-content">This swaps between "Must match
one from each" (strict) and "Must match just one" (loose) for the
filters.</div>
</div>


I'll post the entire block of CSS at the bottom. The relevant bit is div.medusa-tooltip has a max-width of 200px - so the content should expand to a max of 200px. This is all happening fine, however after word-wrap, the width of the text is less than 200px, but the div stays expanded at 200px.

If anyone knows of a solution to make the div shrink to the size of wrapped text, I'd much appreciate it.

Note: this is an internal project, for which the entire company is told to use it with Firefox or don't bother using it, so we don't need to consider cross browser support.

CSS:
div.medusa-tooltip {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 6px 6px 6px 6px;
padding: 0px 5px 5px 5px;
border: 1px solid #000000;
max-width: 200px;
}

div.medusa-tooltip-header {
height: 22px;
line-height: 22px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
border-bottom: 1px solid #c0c0c0;
font-size: 12px;
padding-left: 5px;
background-color: rgba(0, 0, 0, 0.6);
}

div.medusa-tooltip-content {
margin-top: 25px;
font-size: 11px;
}

[edited by: alt131 at 7:22 pm (utc) on Aug 7, 2012]
[edit reason] Thread Tidy - Side Scroll [/edit]

 

Paul_o_b




msg:4482606
 3:00 pm on Aug 7, 2012 (gmt 0)

Hi,

If I understand what you want then it's not possible to make the div adjust exactly to the size of the wrapped text. The text pushed the div to the limit and although one word has wrapped the space will not collapse where the wrapped word came from.

If the space did collapse then I guess the browsers would have to recalculate every line width again as subsequent words may not then fit in the reduced space and so on, so I guess its not feasible to do.

You could just use text-align:justify and then it will always look as though it is even at the edges.


div.medusa-tooltip {
text-align:justify;
}


Readie




msg:4482807
 8:58 am on Aug 8, 2012 (gmt 0)

Hey, thanks for the response.

Suspected that'd be the case, but it's nice to have it confirmed. We did bandy around the idea of using justify yesterday, but decided it looked better with the 10px or so of padding, than the giant spaces justify causes.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved