CODEWITHSUNDEEP
htmlcssangular
Bigeyes
Bigeyes

Reputation: 1666

How to click CSS text-overflow ellipsis to display a long text in pop up?

I have a long sentence in table cell. So I use text-overflow to show ellipsis. My question is how to click the dots(...) to show the entire text in a popup?

  table {
      width: 100%;
      table-layout: fixed;
  }
  table td {
      border: 1px solid red;
      padding: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }

StackBlitz Demo

Upvotes: 0

Views: 4201

Answers (1)

BTSM
BTSM

Reputation: 1663

When click toggle class show.

And add this code to css.

table td.show{
  border: 1px solid red;
  padding: 5px;
  white-space: break-spaces;
  overflow: unset;
}

Please confirm this url. https://stackblitz.com/edit/angular-a1ffmf-4chzaw?file=src%2Fapp%2Ftable-basic-example.css

Upvotes: 2

Related Questions