Menu
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?
524
For longer content, you can add a . text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block . This text is quite long, and will be truncated once displayed.
With line-clamp text can be truncated after multiple lines, whats even more interesting is you can truncate it by specifying the line number where you want to truncate it. eg: -webkit-line-clamp: 3; will truncate start truncating the text from the third line.
TEXT TRUNCATION IS THE PROCESS OF shortening text content. If text is truncated, it is usually followed with 3 periods called an ellipsis. On webpages, there are several ways to shorten text content so that it fits within a certain designated area.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
