一个长文件名流过其他文本

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的顶部。

Answer 1

如果您想使用white-space作为：

，则需要使用text-overflow属性

代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的方法不使用引导程序，但是您可以随时将其包装在col-xs-12或根据需要。

另外，你在点击时说过你希望这种情况发生，而且由于你使用的是bootstrap，我还包括一个jquery点击功能。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;