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

尝试这个

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

Answer 2

在您的情况下，最简单的解决方案之一是：

• 移动 div 内的按钮
• 移除宽度：200px；
• 添加浮动：左；样式到 div。

请参阅以下小提琴：http: //jsfiddle.net/ggMPw/

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

Answer 3

除非您可以指定按钮和/或文本的宽度，否则没有很好的方法来做到这一点。

http://jsfiddle.net/jaypeagi/AbmqS/12/

div * {
    float:left;
}
div div {
    width: 150px;
}
button{
    width: 50px;
}
div br {
    clear:both;
}

但是，如果您打算使用按钮将文本设置为 200px 作为附加宽度，它会更好一些，您可以这样做：

http://jsfiddle.net/jaypeagi/AbmqS/15/

div * {
    float:left;
}
div div {
    width: 200px;
}
button{

}
div br {
    clear:both;
}

body > div {
    display:inline-block;
}

Answer 4

你也可以使用表

<div style="width:200px;border:1px solid green">
<table>
    <tr>
        <td style="width: 150px;white-space:nowrap;overflow: hidden;
text-overflow: ellipsis; float: left">sdasdasdasdsadasdasdsadsadsaddsa

        </td>
        <td>
            <button>aaa</button>
        </td>
    </tr>
</table>

这是小提琴的链接

Answer 5

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

我曾经在这里很难学到这一点。

小提琴

标记

<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;    
}