CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ranveer
Ranveer

Reputation: 6871

Truncate long links in Bootstrap

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:

enter image description here

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

Upvotes: 6

Views: 5240

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

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>

Upvotes: 8

Related Questions