Ellipsis implementation has long text going over other text

Question

I'm trying to implement ellipsis and it's partially working - I am having one problem, when I hover on the very long work, it goes on top of the other words. I can't explain it very well, so here's a picture to show what exactly is happening:

Before hover:

After hover:

Here's my code:

.attachment td {
  max-width: 300px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment td:hover {
  overflow: visible;
  white-space: normal;
}

<body>

  <h1>The text-overflow Property</h1>

  <p>Hover over the div below, to see the entire text.</p>

  <div class="a">This is some long text that will not fit in the box.</div>

  <table class="table table-striped table-hover">
    <tbody>
      <tr class="attachment hover-parent">
        <td>
          bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
        </td>
        <td>
          download
        </td>
        <td>
          delete
        </td>
      </tr>
    </tbody>
  </table>

I feel like I'm missing out on one thing, I just can't pin point it. Any help?

Edit: Here's my desired effect:

Edit: What I needed was overflow-wrap: breakword;, thanks Raina

Why do you apply `overflow: visible` on hover, and what's the desired effect? — raina77ow, Oct 12 '20 at 21:30
Hey @raina77ow, I'm editing the question to add my desired effect. Thanks for your comment — Linda Kadz, Oct 12 '20 at 21:32
And I set `overflow: visible` so that I am able to see the full text on hover @raina77ow — Linda Kadz, Oct 12 '20 at 21:41
Glad that solved the issue; voting to close this as a duplicate of https://stackoverflow.com/questions/18628038/break-long-word-with-css — raina77ow, Oct 12 '20 at 22:10

score 0 · Answer 1 · answered Oct 12 '20 at 21:36

overflow-y is better

https://jsfiddle.net/2g1jham6/

<head>
    <style> 
     .attachment td {
      max-width: 300px;
      overflow: hidden;
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
     .attachment td:hover {
         overflow-x: hidden;
      overflow-y: scroll;
      white-space: pre-wrap;
    }
    </style>
    </head>
    <body>
    
    <h1>The text-overflow Property</h1>
    
    <p>Hover over the div below, to see the entire text.</p>
    
    <div class="a">This is some long text that will not fit in the box.</div>
    
    <table class="table table-striped table-hover">
              <tbody>
                <tr class="attachment hover-parent">
                  <td>
                  bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
                  </td>
                  <td>
                  download
                  </td>
                  <td>
                    delete
                  </td>
                </tr>
              </tbody>
            </table>

This works, but it interferes with the ellipsis functionality thus doesn't solve the problem — Linda Kadz, Oct 12 '20 at 21:44

Aib Syed · Answer 2 · 2020-10-12T22:06:45.860

I've updated your code. The reason for the overlapping is because you have download and delete in their own td elements in the same table.

See below

.attachment {
  max-width: 300px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: no-wrap;
  width: auto;
}

.attachment:hover {
  overflow: visible;
  white-space: normal;
}

.option {
display: inline-block;
text-overflow: none;
}

<body>

  <h1>The text-overflow Property</h1>

  <p>Hover over the div below, to see the entire text.</p>

  <div class="a">This is some long text that will not fit in the box.</div>

  <table class="table table-striped table-hover">
    <tbody>
      <tr>
        <td class="attachment"> bhdvbcjkdsbjdhskbcsajdkggfbjaksbfisjkadzhfnisfjdkzvbcds,zhvmcneajsdkzvbdjszvbsdjzkvbdsjzkxvbdscjkvbdcxzjhvbdfshzjkxvbd
        </td>
        <tr>
        <td class="option">
        download
        </td>
        <td class="option">
        delete
        </td>
        </tr>
      </tr>
    </tbody>
  </table>

The download and delete are links and need to be on their own columns — Linda Kadz, Oct 12 '20 at 21:43

Ellipsis implementation has long text going over other text

2 Answers2