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

我故意将 div 的宽度设置为 50%，因此很容易复制我所说的内容。我已将此代码放入此小提琴中。如何使跨度不会向下跳而是会形成一个省略号？

Answer 1

JSFiddle.

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

You need a set it as inline-block or block, otherwise a span keeps increasing. You may remove or edit the width as you see fit.

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