Multiple Elements and CSS text overflow / ellipsis

Question

Assume the following:

<li>
   <strong>Name:</strong>
   <span>John Doe</span>
</li>

The label part (the string in the <strong> tag) and the value part (the string in the <span> tag) can have any length. So, sometimes the label might be long and the value might be short, or vice versa, or both short, or both long.

When the combined width of the label and value exceeds a specified width, I'd like the tail-end of the concatenated string to display ellipsis. How do I do this in CSS?

UPDATE: what if the markup looked like this?

<dl>
   <dd>Name:</dd>
   <dt>John Doe</dt>
</dl>

The first will work as is using e.g. `li { white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; }` because both `` and `` is `display: inline`. The second need to target the `dl dt` as it is `display: block`. — Asons, Nov 05 '18 at 10:03
As you can see, also the display type matters, and for `text-overflow: ellipsis;` to work the element should be of type _block_ (e.g. "inline-block", "block", "flex", though _flex_ has some more things to look out for). — Asons, Nov 05 '18 at 10:08

score 7 · Answer 1 · answered Nov 02 '18 at 02:31

7

You should use the following:

li {
    white-space: nowrap; 
    width: <your width> 
    overflow: hidden;
    text-overflow: ellipsis; 
}

answered Nov 02 '18 at 02:31

kamentk

513
3
12

I'm sure I tried this, but will test again. – StackOverflowNewbie Nov 02 '18 at 02:36
What if the markup was a definition list, instead? There is no containing element for the `dt` and `dd` tags like there is for the first example (`li`). Would I just wrap the `dt` and `dd` in a, say, `span` tag? I need to markup to remain semantically correct and HTML5 valid. – StackOverflowNewbie Nov 05 '18 at 02:27
@StackOverflowNewbie, no you couldn't use a `span` tag. The [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) state the permitted child elements of a `dl`. They mention a `div`, but don't give an example of it's use. You may find different browsers interpret the markup differently if tags are mixed. – fubar Nov 05 '18 at 02:36
Should I stay away from a definition list even though it's probably more semantically correct in my application? Or is there a way to look at the `dt` and `dd` as a single unit and apply the ellipses when their combined width exceeds some threshold? – StackOverflowNewbie Nov 05 '18 at 05:19

score 7 · Accepted Answer · answered Nov 05 '18 at 13:07

Just set text-overflow: ellipsis on the containing <li> element.

li {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

<ul>
  <li>
     <strong>Name:</strong>
     <span>John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe</span>
  </li>

  <li>
     <strong>Very long long long long long long long long long long long long Name:</strong>
     <span>John Doe</span>
  </li>
</ul>

When working with a definition list, you can enclose <dt> and <dd> elements into a <div> (this is explicitly allowed by the spec since HTML5, but it works in a few older browsers, too). In this case, remember to style them with display: inline to display them in the same line of text.

dl>div {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

dl>div>* {
    display: inline;
}

<dl>
  <div>
     <dd>Name:</dd>
     <dt>John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe John Doe</dt>
  </div>

  <div>
     <dd>Very long long long long long long long long long long long long Name:</dd>
     <dt>John Doe</dt>
  </div>
</dl>

Problem Solver · Answer 3 · 2018-11-05T11:47:40.810

-2

you can use this for li

li strong, li  span{
  width: 250px; /*change the width according to your choice */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  clear: both;
}

and for dl

dl dd, dl dt{
  width: 100px; /*change the width according to your choice */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  clear: both;
}

edited Nov 05 '18 at 11:47

answered Nov 05 '18 at 09:49

Problem Solver

422
2
9

@StackOverflowNewbie is issue resolved or not – Problem Solver Nov 05 '18 at 10:33
For the definition list, the `dt` and `dd` should appear inline. Will your CSS work? – StackOverflowNewbie Nov 05 '18 at 10:57
@StackOverflowNewbie yes it should you can check – Problem Solver Nov 05 '18 at 11:05
It's not appearing inline: https://jsfiddle.net/sd3ep2ow/. – StackOverflowNewbie Nov 05 '18 at 11:37
Also - I only want the ellipsis to appear once -- at the end of the combined dt and dd string. I'm seeing two ellipsis: https://jsfiddle.net/sd3ep2ow/1/ – StackOverflowNewbie Nov 05 '18 at 11:38
@StackOverflowNewbie check now answer is update – Problem Solver Nov 05 '18 at 11:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183123/discussion-between-problem-solver-and-stackoverflownewbie). – Problem Solver Nov 05 '18 at 12:50

Multiple Elements and CSS text overflow / ellipsis

3 Answers3