如何通过css包装文本

我试图将一个长文本包装在一个表中，但面临着长文本与其他内容重叠的问题

例如：

表td{
空白：nowrap；
最大宽度：10em；
溢出：隐藏；
文本溢出：省略号；
}
表td：悬停{
溢出：可见；
}

标题1
标题2
标题3
在家打赌
10
80%
MOSER 2384 Schermaschine MOSER
20
40%
Bg24单个600x120
30
50%
只需在鼠标悬停时添加
空白：normal


表td{
空白：nowrap；
最大宽度：10em；
溢出：隐藏；
文本溢出：省略号；
}
表td：悬停{
溢出：可见；
空白：正常；
}

标题1
标题2
标题3
在家打赌
10
80%
MOSER 2384 Schermaschine MOSER
20
40%
Bg24单个600x120
30
50%
我不会在悬停时做任何事情（即删除
表td:hover
）。因为当您将
overflow
设置为
hidden
时，默认情况下，当您悬停时，工具提示已经显示出来，它会向您显示全文-这比通过展开某些行来展开和移动表行要容易得多



表td{
空白：nowrap；
最大宽度：10em；
溢出：隐藏；
文本溢出：省略号；
}

标题1
标题2
标题3
在家打赌
10
80%
MOSER 2384 Schermaschine MOSER
20
40%
Bg24单个600x120
30
50%
尝试添加

whitespace: normal; 

或尝试

white-space: pre-wrap; 

在悬停中。
使用单词break attibute来表示元素怎么样

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

我不确定这是否是你想要的，但我找不到其他解决方案

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

@Nit将第二项悬停。为什么不干脆去掉你告诉它不要包装的那行？：
空白：nowrap跳跃，但您是否尝试添加
空白
正常
或
预包装
可能是一个解决方案，但最好避免在悬停时出现新行。如果悬停时没有新行，并且长文本也不应与其他内容重叠，那就更好了。因此，当长文本显示在鼠标悬停时，它应该是可读的。没有新行，并且不要与其他列重叠。这意味着您的列大小应该改变，这将不是很好。而是使用工具提示。设计工具提示，使其与您正在使用的工具提示不同。工具提示/标题属性已被其他信息使用，因此不能用于长文本。