Question

I am working on a web app with a visual component which needs to be ellipsized. The catch is that I need to have some other elements on the same line.

[ ellipsized text | element-x | element-y ]

I’ve tried doing things with floats to get everything on one line, but this prevents the element from ellipsizing.

The only solution I’ve come up with was to make element-y { position: fixed; top:0; right:0 }, but then I have to do a margin-right: xxx on the ellipsized text, which I’m okay with.

The problem is, element-x is an externalized string which comes from a translation file, so I don’t have a clean way of getting the width here.

Does anyone know of a clean way to achieve this? Ideally I want to avoid setting any widths on anything except element-y, which is an image.

Answer 1

I’ve come up with a solution which seems to work well across different browsers:

You have to wrap your ellipsized block element in an inline element. The way that the ellipsizing works, your ellipsized element needs to be constrained by something. Normally, that something is a static width. However, a max width, or an arbitrary constraint from a parent also works.

<div class="container">
   <span style="display:inline; float: right;">
       Right-aligned elements
   </span>
   <span>
      <span class="ellipsized-block-text">Long text goes here</span>
   </span>
</div>