如何拒绝“nowrap”来增加元素的宽度？答案

【问题标题】：How to deny "nowrap" to increase width of element?如何拒绝“nowrap”来增加元素的宽度？
【发布时间】：2013-06-12 04:18:05
【问题描述】：

我有这样的结构：

<table>
<tr>
    <td class = "one">This cell should has width 60%</td>
    <td class = "two">
        <div>
            <div class = "three">Hint</div>
            <div class = "four">
                And ending of this string should be cutted out with ellipsis, no matter how long string will be
            </div>
        </div>
    </td>
</tr>
</table>

用css

.one { width: 60%; }

.three {
    display: none;
    float: right;
}

.two:hover .three { display: block; }

.four {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

我希望左侧单元格的宽度始终为 60%，右侧单元格占用所有其他空间。右侧单元格中的长单行文本应用省略号截断，无论是“提示”元素可见还是不可见。

我尝试使用display: inline、float: left、position: absolute，但没有得到任何不会破坏右侧浮动提示元素的结果。

jsFiddle 在这里：http://jsfiddle.net/Z2kLV/1/

另外，解决方案不必是跨浏览器，我只需要 chrome。

请帮忙，我做不到

【问题讨论】：

我不太明白你在做什么......
右侧单元格中的单行长文本应被截断，因此左侧单元格将采用其声明的 60% 宽度
为什么在表格中使用 div？这是你想要的吗？ jsfiddle.net/Z2kLV/2
多做两列：一列是长文本，另一列是提示，只有在第一个悬停时才会出现
不，右侧单元格中的文本必须在一行中

标签： width ellipsis css nowrap

【解决方案1】：

我搜索的不够好，现在找到了我的答案here

它是 - 将以下 css 添加到表格元素：

table {
    width: 100%;
    table-layout: fixed;
}

jsFiddle 上的工作示例：http://jsfiddle.net/Z2kLV/5/

【讨论】：