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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
posts: 945
votes: 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]

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

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Dec 13, 2009
votes: 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.