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％，因此很容易复制我所说的内容。我已将此代码放入this fiddle。如何使跨度不会跳过但是会形成省略号？

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，否则span会不断增加。您可以根据需要删除或修改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; }

如何防止元素下降？

3 个答案: