white-space property打破元素宽度

Question

所以我想要实现的第一件事是将两个元素并排堆叠在一起，这两个元素将采用完整的可用高度，其中一个元素具有固定宽度并且容器的宽度变化。左侧元素包含一个图像（宽度为70px），但整个元素的宽度应为200px。正确的元素应该只适合文本的一行，并且任何溢出的文本应该被剪切，显示为...。

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只适用于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; 
} 

DEMO：http://jsfiddle.net/nLgqsxLg/4/

延伸阅读：

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

Answer 2

好吧，我只是literaly明白你想干什么。这样做，是这样的：

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使它如此，它并没有在包装空格。