Truncate text with ellipsis in CSS (nested divs, not HTML table)

Question

I have a "table" of a fixed width. The table has a "caption", and one or more "rows". Each row contains two "cells", a label and a value.

Note: I'm not actually using a table in this case. Those table, row, et al references above are actually divs with the appropriate display: table-* style.

I want the first column of cells (the labels) to size naturally (I can modify the text as needed when they're too wide). And, I want the second column of cells to not push past the width of the "table". That is, if the cell's value is too long, I want it truncated with an ellipsis.

Fiddle

That fiddle feels like it's close, but something is eluding me. How can I fix my CSS to make the green values not blow past the expected width?

body {
    font-family: Calibri;
}
.expectedWidth {
    width: 300px;
}
.header {
    max-width: 300px;
    background-color: yellow;
    margin-bottom: 4px;
    border-left: 1px dotted red;
    border-right: 1px dotted red;
    text-align: center;
}
.cardlist {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.card {
    border-spacing: 0px;
    padding: 0px;
    display: table;
}
.caption {
    text-align: left;
    background-color: lightgrey;
    display: table-caption;
    width: 100%;
}
.tbody {
    display: table-row-group;
}
.row {
    background-color: grey;
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell.col1 {
    background-color: lightblue;
    padding-right: 4px;
}
.cell.col2 {
    background-color: lightgreen;
}

<div class="header expectedWidth">This is the expected width.</div>
<div class="cardlist">
    <div class="card expectedWidth">
        <div class="caption">This table should be the expected width.</div>
        <div class="tbody">
            <div class="row">
                <div class="cell col1">Subject:</div>
                <div class="cell col2">Some long value that should be truncated at the expected width.</div>
            </div>
            <div class="row">
                <div class="cell col1">Probability:</div>
                <div class="cell col2">50%</div>
            </div>
            <div class="row">
                <div class="cell col1">Elvis:</div>
                <div class="cell col2">Presley</div>
            </div>
            <div class="row">
                <div class="cell col1">42:</div>
                <div class="cell col2">The answer to life, the universe and everything</div>
            </div>
        </div>
    </div>
</div>

Please include code in the question itself. And for this you could have used SO's new code snippet feature....just like jsFiddle but embedded in the question. Look for the button with `<>` or hit Ctrl + M — Jon P, Apr 08 '15 at 23:22
Right after posting this, I came across one more related post and dialled in on my solution. A combination of `table-layout` and setting the width of the first column got me a working solution that truncates as I wanted: https://jsfiddle.net/FourOhs/4a340hxg/2/ — JMD, Apr 08 '15 at 23:37
That's my first use of SO's new snippet feature. Thanks, @JonP, for pointing it out. Also, code inserted from my original fiddle, as requested. — JMD, Apr 08 '15 at 23:39
You know, @misterManSam, I think we can call it duplicate. Shall I delete it myself, or leave it here for posterity (marked as duplicate)? It was this answer, as well as the question's accepted answer that got me to my solution: http://stackoverflow.com/a/12839145/56793 — JMD, Apr 08 '15 at 23:44
@JMD - I would actually have it marked as a [duplicate of this question](http://stackoverflow.com/q/9789723/2930477). Post an answer here and accept it and place a duplicate close vote with that link. I'll start with the first close vote :) — misterManSam, Apr 08 '15 at 23:51

score 1 · Answer 1 · edited May 23 '17 at 10:24

To make this work, apply

table-layout: fixed

to the table-level div and

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

to the cells that need to be truncated. And here's a working modification of the fiddle from the original question:

body {
    font-family: Calibri;
}
.expectedWidth {
    width: 300px;
}
.card {
    display: table;
    table-layout: fixed;
}
.truncated {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.caption {
    background-color: cornflowerblue;
    font-weight: bold;
    display: table-caption;
}
.tbody {
    display: table-row-group;
}
.row {
    background-color: grey;
    display: table-row;
}
.cell {
    display: table-cell;
}
.cell.col1 {
    background-color: lightblue;
    width: 30%;
}
.cell.col2 {
    background-color: lightgreen;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

<img src="http://placehold.it/300x16/eeee22/000000&text=This+is+the+expected+width" />
<div class="card expectedWidth">
    <div class="caption expectedWidth truncated">This caption is too long but should be the expected width.</div>
    <div class="tbody">
        <div class="row">
            <div class="cell col1">Subject:</div>
            <div class="cell col2">Some long value that should be truncated at the expected width.</div>
        </div>
        <div class="row">
            <div class="cell col1">Probability:</div>
            <div class="cell col2">50%</div>
        </div>
        <div class="row">
            <div class="cell col1">Elvis:</div>
            <div class="cell col2">Presley</div>
        </div>
        <div class="row">
            <div class="cell col1">42:</div>
            <div class="cell col2">The answer to life, the universe and everything</div>
        </div>
    </div>
</div>

This answer was borne out of this question's solution.

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

display:table-cell doesn't work with text-overflow: ellipsis. See discussion here

Consider changing your layout to use display:inline-block with widths or percentages (which is a requirement for css only ellipsis) to accomplish your goal. Technically, it's probably a more semantically correct approach anyways, though table-cell layouts are in quite wide use...

edited May 23 '17 at 11:47

Community

1
1

answered Apr 08 '15 at 23:11

bpeterson76

12,918
5
49
82

You may be right that I should transition to `inline-block`. I've been getting away from outright `` usage, but even `table-*` style divs feel like a crutch.
– JMD Apr 08 '15 at 23:46
1

@JMD - a `` is a fine choice for the content you want to display here. There is nothing wrong with semantically appropriate table usage!
– misterManSam Apr 09 '15 at 00:19
1

@misterManSam , yup, people tend to overlook that `` is perfectly OK to use for tabular data, just not for screen layout. Using nested `
` tags to emulate a `
` is almost as bad as using a `
` for layout! `
` has been kept in the HTML5 spec for a reason.
– Jon P Apr 09 '15 at 00:53

I'll keep that in mind, @JonP and misterManSam. I'm "seeing" the difference now. That said, I had the same truncation problem when I used a table, but the duplicate question referenced above is actually the answer for that scenario and I made it work for my div-based table here. (Thanks for the lesson. I learned something today.) – JMD Apr 09 '15 at 15:16

Truncate text with ellipsis in CSS (nested divs, not HTML table)

2 Answers2