javascript - 如何使跨度重叠 td 内的文本？

Question

当用户将鼠标悬停在long text跨度上时，跨度会扩大并且大小会td发生变化。我想阻止这种变化。td无论内部跨度有多长，我都希望具有相同的尺寸。是否可以？

score 4 · Accepted Answer

尽管您可以使 td 的宽度更大，但就标签的长度而言，这仅提供有限的选项，但另一个更安全的解决方案是将跨度绝对相对于现有跨度定位，如下所示：http:// jsfiddle.net/9nvGM/6/

HTML：

<span class="label"><span class="long label">long long long text</span>long text</span>

CSS：

.label{
    position:relative;
}
.long{
    position:absolute;
    left:0px;
    top:0px;
    display:none;
}

JS：

handlerIn = function(e) {
  span.find(".long").show(); 
}
handlerOut = function(e) {
  span.find(".long").hide();   
}

score 0 · Accepted Answer

将 td 设置为相对位置，将跨度设置为绝对定位，然后设置跨度的位置，也许还有宽度。跨度也需要显示为块。这应该会导致跨度保持在原来的位置，并且它将与任何东西重叠。跨度的行为应该有点像工具提示。

score 0 · Accepted Answer

试试这个：

基本上的想法是固定 td 或 span 的宽度

span
{
    width:50px;
    overflow-x:scroll; /* or hidden */
}

score 0 · Accepted Answer

0

只需添加此 CSS 规则

td {
    max-width: 87px;
}

于 2013-03-07T09:08:00.493 回答

score 0 · Accepted Answer

尝试为你的 td 使用 min-width 和 max-width 然后你就有了你想要的

CSS

.tds{
max-width: 60px;min-width: 60px;
}

score 0 · Accepted Answer

.lable 类中没有包装样式。
只需将 white-space 设置为 normal 即可将其删除。

.label{
    width:55px;
    word-wrap:break-word;
    white-space: normal !important;
}

6 回答 6