截断Bootstrap中的长链接

Question

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

示例：

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

Answer 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>