0

How can I determine if div has overflow hidden using html ? using Ngif I don't want to use it in type script code I need to set another attribute if the div has overflow hidden .

<div id="greetings" [innerHTML]="page.title">
</div>

#greetings{
   width: 100 px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

How can I do that?

Abel Valdez
  • 2,368
  • 1
  • 16
  • 33
Mhammed Zghoul
  • 57
  • 1
  • 7

1 Answers1

0

Exist a way to get the style information about of element by using a var inside of element in this case is named #vars it has the ability to get the style directly in the element that's why I put the atribute style="overflow: hidden"

Take a look to the following example:

<div id="greetings" style="overflow: hidden" #vars>
  <div *ngIf="(vars.style.overflow === 'hidden')">
      Hello universe!
  </div>
</div>

This is a demo

Abel Valdez
  • 2,368
  • 1
  • 16
  • 33
  • Its already hidden ! Or its just return true if there are text hidden !! I mean When this condition return true !! *ngIf="(vars.style.overflow === 'hidden') – Mhammed Zghoul Jun 21 '18 at 17:49
  • if you change `style="overflow: hidden"` to for example `style="overflow: auto"` it will disappears, it is just an example I just giving you how you can compare the style properties in **html directly** – Abel Valdez Jun 21 '18 at 17:53
  • I need just to determine if div has overflow I mean it has title and hide the overflow of it , becouse there are case the div contain full title – Mhammed Zghoul Jun 21 '18 at 18:12