How to find at what index string overflowed with div?

How to find at what index string overflowed with div?
0

#1

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


#2

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.


#3

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


#4

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


#5

Checked again in google chrome and firefox, works


#6

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


#7

I will take a look for safari.

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


#8

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