Activate Overflow Ellipsis on SPAN, but also Wrap Around / Use Height if possible

Question

I have SPANs (placed inside LI) on which I want to activate the ellipsis (...) if they are overflowing. However, the problem is I also want them to wrap around and use all the available height.

Consider Snippet #1: This is not what I want because Box #1 shouldn't be ellipsified on one line. There is plenty of Height available, so in this case it should wrap around. Box #2 looks OK here.

.spanbox {
   width: 136.5px;
   text-overflow: ellipsis;
   white-space: nowrap; /* TOGGLING THIS */
   overflow: hidden;
   display: inline-block;
}

.item1 {
   border: 1px solid black;
   height: 134px;
   width: 136.5px;
}

.item2 {
   border: 1px solid black;
   height: 17px;
   width: 136.5px;
}

<li class="item1">
   <span class="spanbox">
   (50min) Food preparation and serving
   </span>
</li>

<li class="item2">
   <span class="spanbox">
   (5min) Talking with friends
   </span>
</li>

Here's Snippet #2: this isn't what I want either, because now there's no Ellipsis at all in Box #2. But now I got the multi-line wrapping in Box #1, so that looks OK. I turned off the white-space: nowrap style.

.spanbox {
   width: 136.5px;
   text-overflow: ellipsis;
   /*white-space: nowrap;*/ /* TURNED OFF NOW */
   overflow: hidden;
   display: inline-block;
}

.item1 {
   border: 1px solid black;
   height: 134px;
   width: 136.5px;
}

.item2 {
   border: 1px solid black;
   height: 17px;
   width: 136.5px;
}

<li class="item1">
   <span class="spanbox">
   (50min) Food preparation and serving
   </span>
</li>

<li class="item2">
   <span class="spanbox">
   (5min) Talking with friends
   </span>
</li>

The goal is to use all the available Height in Box #1, but activate the ellipsis on Box #2, so a combination of the above two snippets. Is this possible?

score 3 · Accepted Answer · answered Nov 12 '17 at 16:39

3

Looks like it's not possible via pure CSS, only a "hack way": https://stackoverflow.com/a/23896375/6053654. And if Javascript solution is OK for you, check this post: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

answered Nov 12 '17 at 16:39

P.S.

15,970
14
62
86

thanks, I'm now dynamically tweaking CSS if Span.Height > LI.Height as below in my additional answer. – gene b. Nov 12 '17 at 17:39

gene b. · Answer 2 · 2017-11-12T19:50:50.233

This is a bad solution and won't work in all cases (see accepted answer for real solutions), but based on the fact that it's impossible in plain CSS/HTML I'm now iterating over my LI's and adding the styles dynamically, e.g.

$('li').each(function(index, item) {
    // Find one Span with text somewhere inside each Event LI
    var innerspan = $(item).find('span');
    // Truncate if SPAN Height < LI (Container) Height
    if ($(this).height() < $(innerspan).height()) {
            // Apply the following CSS
            // The Ellipsis also requires a Width value and overflow=hidden
            var width = $(this).width();
            $(innerspan).css( {  
                               'overflow': 'hidden', 'width' : width,
                               'text-overflow': 'ellipsis', 'white-space': 'nowrap'
                               } );         
        }
        // Otherwise default styling with multiline, no ellipsis
        // (But won't work if need multiline WITH ellipsis!)
    }

});

Activate Overflow Ellipsis on SPAN, but also Wrap Around / Use Height if possible

2 Answers2