Question

我正在使用bootstrap并试图将一个按钮放在一个假的只读文本框中，这大致是我所取得的fiddle

这个div在.table-responsive的表中，因此，如果我使用float，当btn非常wide

时它会溢出

考虑到“测试”文本的长度可变但我的按钮是固定的

，我该怎么办？

<div class="my-container">
    <span>testing</span>
    <span class="btn btn-success pull-right">btn</span>
</div>

Answer 1

如果您的按钮宽度是固定的，那么您可以尝试这样的事情：

http://jsfiddle.net/1dm7c8jh/

<强> HTML：

<div class="my-container">
    <span>testing</span>
    <span class="btn btn-success pull-right">btn</span>
</div>

<强>的CSS：

.my-container {
    background-color: #fffaae;
    padding: 10px;
    padding-right: 120px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.btn {
    background-color: #9AD2FF;
    position: absolute;
    padding: 5px;
    width: 100px;
    top: 5px;
    right: 5px;
    text-align: center;
    color: white;
    cursor: pointer;
}

Answer 2

您可以在bootstrap中使用截断类，在两个跨度或任何一个跨度中截断文本。

这里提到的，或者只是简单地使用css;

http://getbootstrap.com/css/#less-mixins-truncating

    // Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

如何在不使用浮动的情况下左右对齐2个跨度

2 个答案: