How to find at what index string overflowed with div?

Here is pen: [ https://codepen.io/ustvarno/pen/VjPQdY ]
If i set

text-overflow: ellipsis;

  white-space: nowrap;
  overflow: hidden; 

i get wierd one dot or two at the end (never three dots), when overflow happens for horizontal axis
But i want if it happend for vertical axis, then i want to find out at what index of string it happend so i can add button more, or three dots
My div is block type and have height represent in pixels

I don’t see any div block, dots, or text, other than ‘Recipe Patterns’. I do see an error in the console saying you need to use strict mode for let/const.

I’m very sorry bout that, take look now please, and try to duplicate content in recipe body to overflow parent

I don’t see any change. Error is still there, don’t see any divs.

Checked again in google chrome and firefox, works

Ah. Doesn’t work in Safari. I was able to see it in Chrome. Try using overflow-y and set a max-height.

I will take a look for safari.

how that gonna help me for finding index? Or to show button more

You can’t find that index. If you want a ‘show more’ button, you can trigger that by comparing the div's scroll height to its client height.

StackOverflow link

1 Like