如何清楚地显示在其他文本顶部流出的文本

Question

我想要一个长文件在点击时流出其他文本的顶部。

这条线看起来像这样。    part1 part1 part1 part1 ... part2 part2 part2

当我点击省略号时，我希望part1s在part2s上流出，而不是重叠，所以part1s清晰可读。我怎么能这样做？

在css中，

.ellipsis {
  overflow: hidden;             
  text-overflow: ellipsis;   
}
.ellipsis:hover {
  text-overflow: initial;
  overflow: visible;
}

<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>

当前渲染如下：

我想清楚地将part1放在part2的顶部。