Cannot disable "white-space: nowrap;" on html div

Issue

On my website app, I have a logger window. In that window, I have table rows with divs inside.

I was able to crop long sentences for users. What I want is, when one hovers an item, it will show all sentences of that item.

It actually works for the last item. But why it does not work for the first item?

.TGC_LibBootGUIDebug {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.TGC_LibBootGUIDebug:hover {
  overflow: visible;
  white-space: normal;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="TGC_LibBootGUIDebug">- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel commodo justo. Aenean vitae tellus vitae libero scelerisque tincidunt eu facilisis tellus. In tincidunt in mi in semper. Vivamus fermentum massa sagittis ullamcorper pulvinar. Ut id volutpat lectus. Nulla eget vulputate orci, id efficitur mauris. Donec lacinia consequat tortor vitae finibus. Phasellus a sem quis arcu iaculis finibus. Quisque tristique, purus ac sollicitudin efficitur, quam libero luctus massa, eget congue urna tellus ut dui.
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="TGC_LibBootGUIDebug">- Ut accumsan mattis eros ac hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean condimentum massa et vestibulum vestibulum. Aenean ac imperdiet arcu. Duis quis elit nibh. Nam tortor nunc, tristique eget dolor eu, placerat accumsan ligula. Mauris at odio cursus, scelerisque lectus nec, interdum erat. Sed facilisis ex vitae magna mattis dictum. Praesent molestie eros id diam sagittis pharetra. Donec sit amet tellus sem. Nullam iaculis nulla sit amet tellus bibendum, vel congue leo commodo. Cras accumsan imperdiet lorem, quis dictum arcu interdum a. In sollicitudin lacinia libero, sit amet accumsan enim mattis vitae.
        </div>
      </td>
    </tr>
  </tbody>
</table>

Solution

Use this width: calc(100vw - 14px); on .TGC_LibBootGUIDebug{} class. here the px I used 14 on codepen it's works for me.

You could customize it for yourself. check it from here

See example:-

.TGC_LibBootGUIDebug {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100vw - 14px);
}
.TGC_LibBootGUIDebug:hover {
    overflow: visible;
    white-space: normal;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="TGC_LibBootGUIDebug">- Ut accumsan mattis eros ac hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean condimentum massa et vestibulum vestibulum. Aenean ac imperdiet arcu. Duis quis elit nibh. Nam tortor nunc, tristique eget dolor eu, placerat accumsan ligula. Mauris at odio cursus, scelerisque lectus nec, interdum erat. Sed facilisis ex vitae magna mattis dictum. Praesent molestie eros id diam sagittis pharetra. Donec sit amet tellus sem. Nullam iaculis nulla sit amet tellus bibendum, vel congue leo commodo. Cras accumsan imperdiet lorem, quis dictum arcu interdum a. In sollicitudin lacinia libero, sit amet accumsan enim mattis vitae.</div>
      </td>
    </tr>
  </tbody>
</table>

Answered By - Meher Ullah Khan Raj