空白屬性會破壞元素的寬度

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 ），元素的寬度就會被忽略。

UPDATE

好的，所以我更新了代碼。 假設我的wrapper-wrapper寬度為600像素。 然后， left div應該為200px寬， right應該填充剩下的所有空間（400px）。 right div中的文本應剪裁為400px ，現在div會增長以適合所有內容。

怎么樣

我希望它是：

Answer 1

問題不是white-space屬性。 那部分很好。 這就是為什么它不起作用的原因：

1. 您已將display設置為table-cell 。 text-overflow僅適用於塊容器元素 。 table-cell不符合此要求。
2. 您尚未為省略號容器定義寬度（ .right ），這也是一個要求 。

您的代碼：

.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/

進一步閱讀：

• 用省略號截斷字符串
• CSS文字溢出：省略號； 不工作嗎？

Answer 2

好的，我從字面上看就是想知道您要做什么。 做，就像：

 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使它不會在空格處換行。