CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3overflow
Billy Logan
Billy Logan

Reputation: 2520

How to use text-overflow inside Bootstrap column?

Suppose I have a row with fixed height and I inserted some text to its column. If it's too long I wanna it to be cut off and at the end of the line three dots supposed to be added like this:

enter image description here

I'm using text-overflow: ellipsis; attribute for this in my row but can't get it to work.

enter image description here

JsFiddle

What am I doing wrong?

HTML

<div class="container">
  <div class="row text">    
    <div class="col-xs-4" style="border: solid">
 Some really long text!  Some really long text!  Some really long text!  Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
    </div>
  </div>        
</div>

CSS

.row {
    margin: 2px 0;
}

.text {
    word-wrap: break-word;
    height: 50px;
    text-overflow: ellipsis;
}

Upvotes: 5

Views: 31598

Answers (3)

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

If you want to do this using css, then try below code :

HTML :

<div class="container">
  <div class="row">    
    <div class="col-xs-4" style="border: solid">
        <div class="text">
            Some really long text!  Some really long text!  Some really long text!  Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!
        </div>
    </div>
  </div>        
</div>

CSS:

.row {
    margin: 2px 0;
}

.text {
    display: block;
    display: -webkit-box;
    max-width: 400px;
    height: 50px;
    margin: 0 auto;
    line-height: 1.2;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Here is jsfiddle

For understanding line clapming in css Line Clamping

Upvotes: 6

vaishali chawla
vaishali chawla

Reputation: 49

Define your CSS class and assign it to div where your are assigning col size like:-

<div class="container">
  <div class="row">    
    <div class="col-xs-4 trimText" style="border: solid">

            Some really long text!  Some really long text!  Some really long text!  Some really long text! The end! Some really long text! The end! Some really long text! The end! Some really long text! The end!

    </div>
  </div>        
</div>

where "trimText" CSS is:-

.trimText{
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis
}

Output Image:

Upvotes: 4

Ranjana
Ranjana

Reputation: 815

Try it doing using js. It will show till 50 chars only. Updated fiddle is - http://jsfiddle.net/y6oatnzy/3/

$(document).ready(function() {
    var showChar = 50;
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar-1, content.length - showChar);

            var html = c +  '..';

            $(this).html(html);
        }  
    });   
});

Upvotes: -2

Related Questions