Question

I have a floated span with some text. I have set the overflow to hidden and the width to a fixed width say 100px.

Now when the text becomes too long it just wraps.

I don’t want to set the height to a fixed px because that way if I change the font-size I may forget to update the height and so on.

<span style="float:left;overflow:hidden;width:100px;">Very Long Text</span>

Answer 1

Sounds like you might want to try something like:

CSS:

.floated-element {
    float:left; /* Or right, whatever */
    width:100px;
    white-space:no-wrap; /* Keeps the text to one line */
    text-overflow:ellipsis; /* This will add ... to the end of text that extends beyond 100px */
    overflow:hidden;
}

HTML:

<div class="floated-element">
    ...
</div>

If you really want to use a <span> rather than a floated <div>, you’ll want to set the span’s display to inline-block. This will let you specify the width while keeping its other inline attributes.