Bootstrap V3两列布局中删除链接靠右且不溢出的实现方案咨询

我来帮你搞定这个困扰！核心问题在于原来的white-space: nowrap会让标题和删除链接形成一个超长的行，当标题溢出时，删除链接会跟着标题一起超出容器，被overflow:hidden截断。我们可以用相对+绝对定位的纯CSS方案完美解决，不需要JS，还能适配栅格列的动态宽度。

解决方案代码 #

HTML（保持你的Bootstrap栅格结构，仅给元素加类名）

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

CSS（关键修改部分）

.divNoOverflow {
  overflow-x: hidden;
  border: solid 1px black;
  /* 给栅格列加一点内边距，避免内容贴边 */
  padding: 0 5px;
}

.divNowrap {
  white-space: nowrap;
  /* 核心：设置相对定位，让删除链接有定位基准 */
  position: relative;
  /* 加行高让内容垂直居中 */
  line-height: 1.5;
}

.title-link {
  /* 让标题占满容器除删除链接外的空间 */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 给删除链接预留宽度，避免内容重叠 */
  padding-right: 35px;
  /* 可选：去掉下划线优化视觉 */
  text-decoration: none;
}

.del-link {
  /* 核心：绝对定位到容器右侧 */
  position: absolute;
  right: 0;
  top: 0;
  /* 可选：加内边距提升点击体验 */
  padding: 0 5px;
  text-decoration: none;
  color: #dc3545;
}

方案说明 #

• 相对定位容器：divNowrap设置position: relative，为删除链接提供定位参考，确保它始终在当前列的范围内。
• 标题截断逻辑：title-link用text-overflow: ellipsis实现长标题自动截断，padding-right预留出删除链接的宽度，避免标题和删除按钮重叠。
• 固定删除链接：del-link通过绝对定位固定在容器右侧顶部，不管标题长短或栅格列宽度变化，始终保持在列的最右端，不会被overflow:hidden截断。
• 适配动态列宽：所有定位都基于栅格列内的容器，完全兼容Bootstrap栅格的响应式变化，窗口缩放时自动适配新的列宽。

原方案失效原因 #

你原来的代码中，标题和DEL链接是同一行的内联元素，white-space: nowrap会让它们形成一个不可换行的超长行。当标题过长时，整个行的宽度超过栅格列宽度，overflow:hidden会把超出部分（包括DEL链接）一起截断——因为DEL链接在标题后方，跟着标题一起超出了容器范围。

内容的提问来源于stack exchange，提问作者Michael La Voie