detect if text-overflow ellipsis is active

Question

I have a product title that displays with a max of 2 lines and will overflow if the number of lines exceeds 2 and will display an ellipsis.

I am trying to detect if the ellipsis is active or not and looking at solution it was suggested to use h1.offsetWidth < h1.scrollWidth however the offsetWidth appears to always be the same as scrollWidth.

The parent element also seems to always be the same so I can't use this to compare the size

How can I detect if the ellipsis is active or not?

template.js

<div>
      <div
          ref="wrap"
          class="productTitle__titleWrapper">
        <h1
            ref="h1"
            class="productTitle__title">
          {{ productTitle }}
          {{ isEllipsisActive() }}
        </h1>
      </div>
    </div>

css

  &__titleWrapper {
      display: flex;
      align-items: flex-end;

  &__title {
      position: relative;
      display: block; /* Fallback for non-webkit */
      margin: rem-calc(-3.5px) 0 0 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;

js

 isEllipsisActive() {
      this.$nextTick(() => {
        let h1 = this.$refs.h1;
        let wrap = this.$refs.wrap
        return h1.offsetWidth < h1.scrollWidth;
      });
    },

You can do that by getting the style object of that element using js and then check if that contains an attr called 'text-overflow' — Amaarockz, Feb 12 '21 at 12:10
are you sure it is offsetWidth and not offsetHeight? maybe set `overflow-y: scroll` on parent. — Igor Moraru, Feb 12 '21 at 12:15

detect if text-overflow ellipsis is active

0 Answers0