HTML ellipsis without specifying the particular width

Question

I'm trying to achieve the following layout (please see the screenshot below).

If both SPAN and B fit the box - they just go one after another.
If they don't - SPAN has an ellipsis but B is displayed completely (it is never bigger than a whole block).

B can be included into the SPAN - but it didn't help me. I was also trying to use tables, even nested ones - nothing helps..

Expected behavior:

Initial snippet:

div {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

A width must be specified somewhere along the line. Otherwise, how can you trigger the ellipsis? More here: https://stackoverflow.com/q/33058004/3597276 — Michael Benjamin, Sep 12 '17 at 23:35
@Michael_B But I specify the width of a parent element.. I don't really like to calc the width by Javascript.. Was wondering if there is some clean solution using some floats or stuff I don't know about - like CSS3's flex... — andkorsh, Sep 12 '17 at 23:42
Oh, based on your title, I thought you didn't want any width involved. — Michael Benjamin, Sep 12 '17 at 23:45

score 5 · Accepted Answer · answered Sep 12 '17 at 23:46

Just add display: flex to the div container:

div {
  display: flex; /* new */
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

A combination of flex default settings, including flex-shrink: 1, enable the ellipsis to render in a flex formatting context.

Ramin Ahmadi · Answer 2 · 2017-09-12T23:42:42.523

3

You need to set the display to inline-block and define a maximum width on inside span to cover it.

div {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
  display:inline-block;
  max-width:150px
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>1234</b>
</div>

edited Sep 12 '17 at 23:42

answered Sep 12 '17 at 23:36

Ramin Ahmadi

619
5
13

1

so you need to decrease max-width of inside span. just edited my answer – Ramin Ahmadi Sep 12 '17 at 23:42
There is always can be 123456... I'm looking for the generic solution which doesn't depend on the width of B, if there is no such then I'll need to calc the width by Javascript – andkorsh Sep 12 '17 at 23:45

score 0 · Answer 3 · answered Sep 13 '17 at 19:08

Answering my own question:

Actually, I wanted the solution to work in PDF generated by wkhtmltopdf library. This library based on QT WebKit which doesn't have support for flex yet but it does support older syntax of flex (called flex-box).

Here is how it works in wkhtmltopdf (works in Chrome too though):

.flexrow {
  width: 300px;
  margin-top: 30px;
  border: 1px solid green;

  display: -webkit-box;
}

.flexrow .fst {
  background-color: yellow;

  -webkit-box-flex: 0.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px; /* for ellipsis */
}

.flexrow .snd {
  background-color: aqua;

  white-space: nowrap;
}

.flexrow .trd {
  background-color: pink;

  -webkit-box-flex: 2147483647; /* max int */
}

<div class="flexrow">
  <div class='fst'>test</div>
  <div class='snd'>12345</div>
  <div class='trd'></div>
</div>

<div class="flexrow">
  <div class='fst'>test test test test test test test test test test test test test test</div>
  <div class='snd'>50</div>
  <div class='trd'></div>
</div>

HTML ellipsis without specifying the particular width

3 Answers3