问题描述:

I'm designing a page using Bootstrap 3.1 wherein if the length of an HTML link is way too long, it overflows out and creates a horizontal scroll in the mobile version. Is there a way to truncate it and replace it by ellipses?

Example:

What I need is that instead of extending out, it should get truncated before the border. ANy idea how to do so?

网友答案:

You need to make sure that the container has overflow: hidden to keep the text from flowing outside of the border and give it text-overflow: ellipsis to give the link the 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>
相关阅读:
Top