CSS ellipsis after a word ends [duplicate]

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)

Answer 1

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

1. 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.
2. 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.