white-space 属性打破元素宽度

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>

aaand 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 应该填充 space 剩下的任何东西（400px）。 right div 中的文本应剪裁为 400px，现在 div 会增长以适应所有内容。

情况如何：

我希望它成为什么样子：

Answer 1

好吧，我真的明白你想做什么。做，比如：

div {
    border: 1px solid black;
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
}

<div>one two three four five six seven eight nine ten</div>

基本上 white-space: nowrap 不会在空格处换行。

Answer 2

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

您已将 display 设置为 table-cell。 text-overflow only works on block container elements。 table-cell不符合这个要求。
您尚未为省略号容器 (.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?

white-space 属性打破元素宽度

white-space property breaks the elements widths

html

css

overflow

word-wrap

white-space 属性 打破元素宽度

white-space property breaks the elements widths

html

css

overflow

word-wrap

white-space 属性打破元素宽度