Madara Uchiha Madara Uchiha - 4 months ago 16
HTML Question

Truncated element side-by-side with non-truncated element

I have a container with two parts of text: Variable length part and static part.

I wish for the variable length part to be truncated (a-la

text-overflow: ellipsis
) so that the container remains at one line at all times.

Here's an image to illustrate:

variable vs static




Now, I know I can solve it fairly simply with
display: flex
on the container like so:



* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
}

.variable {
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.static {
padding: 0 5px;
white-space: nowrap;
}

<span class="container">
<span class="variable">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?</span>
<span class="static">| Static Text</span>
</span>





However, I require IE8 support or higher. So flexbox is decidedly out.

I've tried


  • display: table
    and
    display: table-cell
    , but that doesn't play nice with variable lengths. The only solution I've found was to set the width on the variable length text which is unacceptable.

  • Playing with floats, but even there, without setting the width for the either text container, I couldn't get the behavior specified above.



Does anyone have other ideas? I'd like to avoid the "I'll assume that the static part takes ~25% so I'll give 75% to the variable width one".

Answer

Here is a solution with a nested CSS table, the key is set the inner table to table-layout:fixed;, it's required for CSS ellipsis.

jsFiddle

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: table;
  width: 100%;
}

.variable,
.static {
  display: table-cell;
  white-space: nowrap;
}

.variable {
  width: 100%;
}

.static {
  padding: 0 5px;
}

.variable-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.variable-cell {
  display: table-cell;
  text-overflow: ellipsis;
  overflow: hidden;
}
<span class="container">
  <span class="variable">
    <span class="variable-table">
      <span class="variable-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorum repudiandae in, delectus similique quos natus facilis non odit laudantium unde nostrum aperiam doloremque magni cum ipsum recusandae repellat iusto quo architecto. Ea reiciendis, natus at fuga officiis, cupiditate voluptatem in, sed quae vero est nesciunt quidem tempora, dignissimos sapiente cumque eveniet. Eaque, fugiat voluptates mollitia veniam, blanditiis aut deleniti. Nesciunt sapiente vitae aut, fugit in commodi neque hic reiciendis, et cupiditate possimus, quod quaerat ducimus ea cumque nihil praesentium. Nesciunt velit magni asperiores optio quam, provident eum earum? Illo et illum, autem ratione! Perferendis non facere, ratione quas beatae?
      </span>
    </span>
  </span>
<span class="static">| Static Text</span>
</span>

Comments