0

テキストをトリミングしようとしていますが、テキストの近くにボタンがあるはずです....しかし、両方が同じ行にある必要があります。これは私が持っているものです:

<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/でも入手できますが、同じ行にテキストとボタンが必要で、ボタンが表示されている必要があります。

それを達成する方法は？

4

5 に答える 5

0

あなたの場合の最も簡単な解決策の1つは次のとおりです。

  • ボタンを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>
于 2013-10-10T10:48:49.550 に答える
0

ボタンやテキストの幅を指定できない限り、これを行う良い方法はありません。

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;
}
于 2013-10-10T10:50:47.293 に答える
0

テーブルも使えます

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

これはフィドルへのリンクです

于 2013-10-10T10:50:52.163 に答える
0

これを試して

<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>
于 2013-10-10T10:44:02.397 に答える
0

重要なのは、省略記号を使用してテキストに 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;    
}
于 2013-10-10T10:59:30.157 に答える