homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

max-width and word-wrap

WebmasterWorld Senior Member 5+ Year Member

Msg#: 4482566 posted 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

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.

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]



10+ Year Member

Msg#: 4482566 posted 3:00 pm on Aug 7, 2012 (gmt 0)


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 {


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4482566 posted 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