Question

我有一个带有2列的bootstrap（V3）网格布局。在这两列中，我列出了＃34;标题链接＆＃34;这可以是短期或长期，也可以是额外的＆＃34;删除链接＆＃34;。

如果标题适合窗口，我希望删除链接浮动到标题链接的右侧;但是，对于将被切断的超长标题，我希望删除链接不会扩展到容器div的溢出，只是在容器div允许的情况下向右显示（在顶部）标题最右边的部分。）

目前，对于小标题，删除链接正确地向右浮动，但如果标题链接溢出到溢出区域，则会被切断。

*请注意，因为这是引导网格布局，所以列宽会发生变化。我希望得到CSS答案，但如有必要，我会使用JS。

以下是显示问题的示例：https://jsfiddle.net/obt42kmz/3/

这是HTML：

<div class="row">
  <div class="col-xs-6 divNoOverflow">
    <div class="divNowrap">
      <a href="#">
        little title
      </a>
      <a href="#">DEL</a>
    </div>
  </div>

  <div class="col-xs-6 divNoOverflow">
    <div class="divNowrap">
      <a href="#">
        long title long title long title long title long title
      </a>
      <a href="#">DEL</a>
    </div>
  </div>
</div>

CSS：

.divNoOverflow {
  overflow-x: hidden;
  border: solid 1px black;
}

.divNowrap {
  white-space: nowrap;
}

Answer 1

您可以这样使用CSS的calc()功能：

.divNoOverflow {
  overflow-x: hidden;
  border: solid 1px black;
}

.full_width {
  width: 100%;
}

.left {
  max-width:calc(100% - 45px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  margin-right: 5px;
}

.right {
  width:45px;
  white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-6 divNoOverflow">
    <div class="divNowrap">
      <a href="#">
        little title
      </a>
      <a href="#">DEL</a>
    </div>
  </div>
  <div class="col-xs-6 divNoOverflow">
    <div class="full_width">
      <div class="left">
        <a href="#" class="">
        long title long title long title long title long title
      </a>
      </div>
      <div class="right">
        <a href="#" class="">DEL</a>
      </div>
      
    </div>
  </div>
</div>

小提琴更新：https://jsfiddle.net/beaver71/y7f6d3f4/

但是你也可以使用float: right;作为你的DEL链接，就像这个小提琴一样：https://jsfiddle.net/beaver71/4m41dtz4/

将链接定位到右侧但不会溢出

1 个答案: