html - 空白属性打破了元素的宽度

Question

因此，我最初想要实现的目标是将两个元素并排堆叠在一起，其中两个元素都将占据完整的可用高度，其中一个元素的宽度固定，而容器的宽度会变化。左侧元素包含一个图像(70 像素宽)，但整个元素应为 200 像素宽。正确的元素应该只适合一行文本，任何溢出的文本都应该被剪掉以显示 ...。

HTML:

<div class="wrapper-wrapper">
    <div class="wrapper">
        <div class="left">
            <image src="http://s4.postimg.org/i1huts8vt/kitten.png" />
        </div>
        <div class="right">
            Text row 1 is a very freaking wide row with tons of text so deal with it or gtfo. Do I have enough text to fill this box now ?

        </div>
    </div>
</div> 

aa 和 css :

.wrapper-wrapper {
    width: 600px;
}
.wrapper {
    border:1px solid #aaa;
    margin:0 0 10px 0;
    display: table;
    width: 100%;
}

.left {
    width:200px;
    background-color:#eee;
}

.left, .right {
    display: table-cell;
    padding:5px;
}

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

一个可运行的演示:

http://jsfiddle.net/nLgqsxLg/2/

所以我决定使用display: table/table-cell的组合来实现垂直堆叠。并使用 overflow 和 text-overflow 来裁剪溢出的文本。问题是当我设置 white-space 属性时(根据 PPK https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow )元素的宽度被省略了。

更新

好的，我已经更新了代码。假设我的 wrapper-wrapper 是 600px 宽。然后 left div 应该是 200px 宽，right 应该填充剩下的空间 (400px)。 右侧 div 中的文本应被剪裁为400px，现在 div 会增长以容纳所有内容。

情况如何:

我想要的样子:

Answer 1

问题不在于 white-space 属性。那部分很好。这就是它不起作用的原因:

1. 您已将显示 设置为table-cell。 text-overflow仅适用于 block container elements . table-cell 不满足此要求。
2. 您尚未为省略号容器 (.right) 定义宽度，即 also a requirement .

您的代码:

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

试试这个:

.right {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    width: 375px;
}

演示:http://jsfiddle.net/nLgqsxLg/4/

进一步阅读:

• Truncate String with Ellipsis
• CSS text-overflow: ellipsis; not working?