css - 我如何通过CSS包装文本

Question

我正在尝试将长文本包装在表格中，但遇到长文本与其他内容重叠的问题。

示例:

table td {
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow:ellipsis;
}

table td:hover {
    overflow: visible;
}

<table>
    <thead>
        <tr>
            <th>Headline 1</th>
            <th>Headline 2</th>
            <th>Headline 3</th>
        </tr>  
    </thead>
    <tbody>
        <tr>
            <td>Bet at home</td>
            <td>10</td>
            <td>80%</td>
        </tr> 
        <tr>
            <td>MOSER 2384 Schermaschine Moser</td>
            <td>20</td>
            <td>40%</td>
        </tr> 
        <tr>
            <td>Bg24 Single 600x120</td>
            <td>30</td>
            <td>50%</td>
        </tr> 
    </tbody>    
</table    

有没有办法通过向内容添加非透明背景来避免这种情况？我该如何处理这个问题？

问候， 凯

Answer 1

只需在鼠标悬停时添加 whitespace:normal。

table td {
  white-space: nowrap;
  max-width: 10em;
  overflow: hidden;
  text-overflow:ellipsis;
}

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

<table>
    <thead>
        <tr>
            <th>Headline 1</th>
            <th>Headline 2</th>
            <th>Headline 3</th>
        </tr>  
    </thead>
    <tbody>
        <tr>
            <td>Bet at home</td>
            <td>10</td>
            <td>80%</td>
        </tr> 
        <tr>
            <td>MOSER 2384 Schermaschine Moser</td>
            <td>20</td>
            <td>40%</td>
        </tr> 
        <tr>
            <td>Bg24 Single 600x120</td>
            <td>30</td>
            <td>50%</td>
        </tr> 
    </tbody>    
</table