html - 如何并排获得长文本和按钮

Question

我正在尝试修剪我的文本和文本附近，应该有一个按钮....但两者必须在同一行中。这是我的:

<div style="width:200px;border:1px solid green">
    <div style="white-space:nowrap;overflow: hidden; text-overflow: ellipsis;">sdasdasdasdsadasdasdsadsadsaddsa</div>
    <button>aaa</button>
</div>

也可在 http://jsfiddle.net/AbmqS/ 获得，但我需要同一行的文本和按钮，并且按钮必须可见。

如何实现？

Answer 1

关键是将 display:block 放在带有省略号的文本上。

我曾经很难学到这一点 here .

FIDDLE

标记

<div class="container">
    <button>aaa</button>
    <div class="text">sdasdasdasdsadasdasdsadsadsaddsa</div>    
</div>

CSS

.container
{
  width:200px;
  border:1px solid green; 
  overflow: hidden;
}
.text
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
}
button
{
    float: right;    
}