CSS ellipsis after a word ends

Question

I am showing text with some elipsis. With my current css the elipsis shows by breaking the word.

I need the elipsis to be shown after a word completes for proper readability.

Below is my css

.myContainer {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 15px;
}

<div class="myContainer">
  Testing the dataset in path oregon location should done
</div>

I do not want to change the width of the container. The word location is not shown.

Elipsis should be shown after the location word(complete)

the width(250px) is included the dots so you must change the width — לבני מלכה, Jul 01 '19 at 06:09
Even if i change the width, if the text here is dynamic then you will not know when it breaks — user804401, Jul 01 '19 at 06:10
https://stackoverflow.com/questions/13012777/text-overflow-ellipsis-avoid-word-break — לבני מלכה, Jul 01 '19 at 06:25
`text-overflow: ellipsis;` doesnot work like that you can use either js or other backend programing to achieve this. Also it depends if you page is responsive then you have to decide on the number of words to be displayed accordingly & for that JS would be better option — Learning, Jul 01 '19 at 07:04

score 5 · Accepted Answer · answered Jul 01 '19 at 06:58

As of 2019, you can't do that with pure CSS. This is for two reasons:

You can't target text nodes with pure CSS, so you can't detect with CSS whether there's a space to inject the ellipsis. The CSS property "text-overflow" merely places the ellipsis wherever the overflow will happen, as in your example.
You also can't target or detect overflow directly with CSS. There are a number of hacks you can try with JavaScript, but the browser just doesn't expose any direct way to see exactly where an overflow break occurs.

Mr Lister · Answer 2 · 2019-07-01T07:47:19.250

0

If you can change your markup, the solution would be something like this. Inspired by an answer from the question found by לבנימלכה, which was more convoluted than necessary though.

.myContainer {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 15px;
}

.myContainer>span {
  display: inline-block;
}

<div class="myContainer">
  <span>Testing</span> <span>the</span> <span>dataset</span> <span>in</span> <span>path</span> <span>oregon</span> <span>location</span> <span>should</span> <span>done</span>
</div>

Edit: This works in Chrome 77 (the Canary), but not in Chrome 75. The other browsers are OK.

edited Jul 01 '19 at 07:47

answered Jul 01 '19 at 06:38

Mr Lister

45,515
15
108
150

1

This solution doesn't work for me: I'm on Chrome 75, Windows 10. – Terry Jul 01 '19 at 07:15
@Terry Whoa! It works here in Chrome 77 (the Canary) and I didn't bother testing on earlier versions. Thanks for the heads up. – Mr Lister Jul 01 '19 at 07:43

score 0 · Answer 3 · answered Jul 01 '19 at 07:12

text-overflow: ellipsis; doesnot work like that you can use either js or other backend programing to achieve this. Also it depends if you page is responsive then you have to decide on the number of words to be displayed accordingly & for that JS would be better option

Below is piece of code using c# which will Title in one line with last word & will trim to text accourdinly to show the word

example : The quick brown fox jumps over the lazy dog

The quick brown fox ....

rather than

The quick brown fox ju....

   protected string getTitle(object title)
    {
        string sTitle = title.ToString();
        if (sTitle.Length > 22)
        {
            var index = sTitle.Substring(0, 21);
            sTitle = index.Substring(0, index.LastIndexOf(' ')) + "...";
        }
        return sTitle;
    }

@FZs, C# example is only for reference purpose as user can do same using javascript.. — Learning, Jul 02 '19 at 03:19

CSS ellipsis after a word ends

3 Answers3