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

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>

这是指向fiddle

的链接

Answer 5

关键是在带有省略号的文本上放置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;    
}

如何并排获取长文本和按钮

5 个答案:

标记

CSS