如何并排获得长文本和按钮答案

【问题标题】：How to get long text and button side by side如何并排获得长文本和按钮
【发布时间】：2013-10-10 10:39:40
【问题描述】：

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

<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/ 获得，但我需要同一行上的文本和按钮，并且按钮必须可见。

如何实现？

【问题讨论】：

标签： html css

【解决方案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;    
}

【讨论】：

这就是我要找的。但是当没有足够的字母时......按钮保持在右侧......有没有可能如何实现这个按钮就在文本附近？
如果这回答了您的问题，那么请将其标记为答案 :)
是的，我会的，但我还有另一个问题，我不想在这个论坛发垃圾邮件 =)

【解决方案2】：

试试这个

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

【讨论】：

使用 css 代替内联样式。

【解决方案3】：

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

在div内移动按钮
移除 width:200px;
将 float:left; 样式添加到 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>

【讨论】：

这不允许文本溢出工作，这正是 OP 所寻找的。span>

【解决方案4】：

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

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

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

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

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

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

}
div br {
    clear:both;
}

body > div {
    display:inline-block;
}

【讨论】：

【解决方案5】：

你也可以使用表格

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

这是fiddle的链接

【讨论】：