title: A long file name flowing out over other texts
body: <p>I want a long file to flow out over the top of other texts when it is clicked. </p>
  
  <p>The line looks like this. 
     part1 part1 part1 part1...       part2 part2 part2</p>
  
  <p>When I click the ellipsis, I want part1s to flow out over part2s, not overlapping, so part1s are clearly readable. How can I do that?</p>
  
  <p>In css,</p>
  
  <pre><code>.ellipsis {
    overflow: hidden;             
    text-overflow: ellipsis;   
  }
  .ellipsis:hover {
    text-overflow: initial;
    overflow: visible;
  }
  
  &lt;div class="col-xs-5 ellipsis"&gt;part1 part1 part1 part1 part1 part1 part1 part1 part1 part1 part1 part1&lt;/div&gt;
  &lt;div class="col-xs-5"&gt;part2 part2 part2 &lt;/div&gt;
  </code></pre>
  
  <p>The current rendering is as follows: </p>
  
  <p><a href="https://i.stack.imgur.com/R8ecS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R8ecS.png" alt="enter image description here"></a></p>
  
  <p>I'd like to flow the part1 over the top of the part2 clearly. </p>
  
  <p><a href="https://i.stack.imgur.com/RztZU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RztZU.png" alt="enter image description here"></a></p>