<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="panel panel-default"> <table class="table table-hover" style='overflow:hidden;'> <tbody> <tr> <td> <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </td> <td class="text-right text-nowrap"> <button class="btn btn-xs btn-info">CCS</button> <button class="btn btn-xs btn-warning"> <span class="glyphicon glyphicon-trash"></span> </button> </td> </tr> </tbody> </table> </div> </div> <div class="container"> <div class="list-group your-div"> <a href="#" class="list-group-item clearfix"> <span class="glyphicon glyphicon-file"></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit consectetur adipisicing elit. <span class="pull-right"> <button class="btn btn-xs btn-info">CCS</button> <button class="btn btn-xs btn-warning"> <span class="glyphicon glyphicon-trash"></span> </button> </span> </a> </div> </div>

.your-div { white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; }