A Long File Name Flowing Out Over Other Texts

I want a long file to flow out over the top of other texts when it is clicked. The line looks like this. part1 part1 part1 part1... part2 part2 part2 When I click the el

Solution 1:

You need to use white-space property if you want to play with text-overflow as:

Code Snippet

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis:hover {
  text-overflow: initial;
  overflow: visible;
  white-space: normal;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-5 ellipsis">part1 part1 part1 part1 part1 part1 part1 part1 part1 part1 part1 part1</div>
<div class="col-xs-5">part2 part2 part2</div>

Solution 2:

My method doesn't use bootstrap, however you could always just wrap it up in a col-xs-12 or as desired.

Also, you said on click you want this to happen, and since you are using bootstrap, I included a jquery click function as well.

$(".cont p").click(function(){
  $(this).toggleClass("active");
});

.cont p{
  display: inline-block;
  max-width: 5em;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
 }

.cont p.active{
  max-width: none;
  text-overflow: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cont">
  <p>hello hello hello hello hello hello</p>
  <p><b>hello</b></p>
</div>