Question

I have two divs, inline. One displays a measurement, the other displays a unit value. The text in each is currently aligned correctly.

I would like to display a bar stretching across the top of the measurement value, but no further. Note: for various reasons, I can’t use text-decoration: overline. Instead I am trying to display a background image behind the text, clipping to the width of the text (not the div).

I have tried using display:table; on the measurement div, and this works, but it has the affect of screwing up my div layout (the text is not aligned between the divs).

Here’s some example html:

<div class="measurement">1234</div><div class="unit">mm</div>

Here’s some example css:

.unit {
  display:inline-block;
}
.measurement {
  display:inline-block;
  background-image:url(overline.png)
  width:200px;
  text-align: right;
}

Does anyone know of a way I can clip the background image to the width of the displayed text?

Answer 1

How about changing the divs to spans and wrapping the measurement span in a div to space it to the desired width?

HTML:

<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>

CSS:

.spacer{
  width:200px;
  display: inline-block;
  text-align: right;
}

.measurement {
  background-image:url(overline.png);
}

See this jsFiddle for a working example.
(background-color should work the same as an image).