html - 一个长长的文件名从其他文本中溢出

Question

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

这条线看起来像这样。 第1部分第1部分第1部分第1部分...第2部分第2部分第2部分

当我单击省略号时，我希望第 1 部分在第 2 部分之上流出，而不是重叠，因此第 1 部分清晰可读。我该怎么做？

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

当前效果图如下:

我想将第 1 部分清楚地置于第 2 部分之上。

Answer 1

如果你想使用 text-overflow ，你需要使用 white-space 属性:

代码片段

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