html - 在 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>