Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

max-width and word-wrap



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

WebmasterWorld Senior Member 5+ Year Member

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]


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

10+ Year Member


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 {


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

WebmasterWorld Senior Member 5+ Year Member

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.

Featured Threads

Hot Threads This Week

Hot Threads This Month