Question

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

示例：

＆＃13;

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

＆＃13;

<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

＆＃13;

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

此致启

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

Answer 2

我在悬停时不会任何（即删除table td:hover）。因为当您将overflow设置为hidden时，默认情况下，当您悬停时已显示工具提示，这会显示全文 - 与您展开和移动表格行相比，它显然更容易阅读扩大其中一些。

＆＃13;

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

＆＃13;

<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

＆＃13;

Answer 3

尝试添加

whitespace: normal;

或尝试

white-space: pre-wrap;

在你的悬停中。

Answer 4

如何将word-break属性用于元素？

table td{      
    word-break: break-all;
}

Answer 5

我不确定这是不是你在找什么，但我找不到另一个解决方案

table td:hover {
    overflow: visible;
    max-width:100%;
}

fiddle here

我怎么能通过CSS包装文本

5 个答案: