在 Bootstrap 中截断长链接答案

【问题标题】：Truncate long links in Bootstrap在 Bootstrap 中截断长链接
【发布时间】：2015-01-24 22:17:26
【问题描述】：

我正在使用 Bootstrap 3.1 设计一个页面，如果 HTML 链接的长度太长，它会溢出并在移动版本中创建一个水平滚动。有没有办法截断它并用省略号替换它？

例子：

我需要的是，它应该在边界之前被截断，而不是向外延伸。知道该怎么做吗？

【问题讨论】：

【解决方案1】：

您需要确保容器具有overflow: hidden 以防止文本流到边界之外，并为其提供text-overflow: ellipsis 以使链接省略号。

.box {
  background: #f99;
  border: 1px solid #c66;
  width: 100px;
  padding: 7px;
  margin-bottom: 15px;
}

.nowrap {
  white-space: nowrap;
}


.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="box">
  <span class="nowrap">A really long piece of text</span>
</div>

<div class="box ellipsis">
  <span class="nowrap">A really long piece of text</span>
</div>

【讨论】：

另外，这是我正在谈论的页面：planet.kde.org.uk 我可以简单地隐藏溢出的文本（超链接），但这不是一件好事。
不幸的是，恐怕您必须将overflow: hidden 和text-overflow: ellipsis 添加到a 标签的父级。在这种情况下，这就是 p 标记。
好的，我会想办法的。问题是在 p 本身中，可能有一些文本可能会溢出，例如不在锚标记中的链接。我想我必须走 JS 的路：/