Question

我正在尝试创建一个链接列表，其中每个链接的右侧都有一个按钮。问题是当链接非常大时，按钮会被包裹到小屏幕上的下一行。我希望链接占用按钮后剩下的所有空间，而不是换行到下一行。我希望链接也可以显示为btn，但我认为这个问题是不必要的。

以下是一个示例：jsfiddle

<div class="row">
    <div class="col-sm-6">
        <p>
            <a href="#">link1</a>
            <button class="btn btn-primary btn-xs pull-right">Button</button>
        </p>
        <p>
            <a href="#">link2</a>
            <button class="btn btn-primary btn-xs pull-right">Button</button>
        </p>
        <p>
            <a href="#">very long link that pushes the button to next line</a>
            <button class="btn btn-primary btn-xs pull-right">Button</button>
        </p>
        <p>
            <a href="#">link4</a>
            <button class="btn btn-primary btn-xs pull-right">Button</button>
        </p>
        <p>
            <a href="#">link5</a>
            <button class="btn btn-primary btn-xs pull-right">Button</button>
        </p>
    </div>
</div>

我已经尝试了每个无包装属性并改变了p的宽度，但似乎没有任何效果，我现在难倒了。此外，如果有人有任何洞察为什么将p元素更改为div元素会弄乱可以理解的布局。

Answer 1

我认为你是根据是否有足够的空间来显示全文来有条件地应用省略号。

首先，您需要应用标准的三个省略号规则：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

然后，您需要设置 display: inline-block ，以便溢出（以及后续省略号）生效，而不会弄乱布局。

最后，最重要的是，您希望使用 max-width 功能设置计算驱动的 calc() 。设置宽度100%，并从中减去按钮的宽度。在这种情况下，您正在寻找max-width: calc(100% - 47px)。神奇之处在于，当您调整页面大小时，继承的 width 会发生变化，但您仍然会为按钮留出足够的空间。这导致在可能的情况下显示全文，并且在不可能时添加省略号。

以下都可以看到：

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.no-deco,
.no-deco:link,
.no-deco:visited {
  text-decoration: none;
  color: darkslategray;
}

.no-deco:hover,
.no-deco:active {
  text-decoration: none;
  color: darkgray;
}

.no-deco {
  max-width: calc(100% - 47px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>
        <a class="no-deco" href="#">link</a>
        <button class="btn btn-primary btn-xs pull-right">Button</button>
      </p>
      <p>
        <a class="no-deco" href="#">link</a>
        <button class="btn btn-primary btn-xs pull-right">Button</button>
      </p>
      <p>
        <a class="no-deco" href="#">very long link that pushes button to next line</a>
        <button class="btn btn-primary btn-xs pull-right">Button</button>
      </p>
      <p>
        <a class="no-deco" href="#">link</a>
        <button class="btn btn-primary btn-xs pull-right">Button</button>
      </p>
      <p>
        <a class="no-deco" href="#">link</a>
        <button class="btn btn-primary btn-xs pull-right">Button</button>
      </p>
    </div>
  </div>
</div>

＆＃13;

这也可以看作 here 。

如何防止Bootstrap3将col类包装到下一行？

1 个答案: