css - 要素がドロップダウンするのを防ぐ方法は？

Question

divには、ボタンとスパンの2つの要素があります。

<div class="outer">
    <button>Perform Action</button>
    <span class="option">View Some Stuff</span>
</div>

スパンについては、省略記号を作成するように指示するルールを適用しました。

div.outer {
    width: 50%;
    border: 2px dotted navy;
}

span.option {
    border: 2px solid red;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

私は意図的にoutdivの幅を50％にしたので、私が話していることを簡単に再現できます。このコードをこのフィドルに入れました。スパンがジャンプダウンせず、代わりに省略記号を形成するようにするにはどうすればよいですか？

Answer 1

JSFiddle。

span.option {
    border: 2px solid red;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;
    width:200px;
}

inline-blockまたはとして設定する必要があります。blockそうしないと、 aspanが増加し続けます。必要に応じて削除または編集できwidthます。

Answer 2

button {
  display: block;
  float: left;
}
span.option {
  border: 2px solid red;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

Answer 3

span.option には、拡張するスペースがあるため、省略記号はありません。そのコンテナの幅は、使用可能なスペースの 50% です。

span.option はコンテンツよりも幅が狭く、ブロック要素である必要があります

div.outer   { border: 2px dotted navy;
              display:inline-block;
              width: 50%;}
span.option { border: 2px solid red;
              text-overflow: ellipsis;
              white-space: nowrap;
          overflow: hidden; 
              display:inline-block;
              width: 70px; }