截断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>