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

问题描述

我想要一个长文件流出其他文本的顶部，当它被点击。

该行看起来像这样。
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的顶部。

解决方案

如果要使用 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 =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>  

/ div>

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 ellipsis, I want part1s to flow out over part2s, not overlapping, so part1s are clearly readable. How can I do that?

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

The current rendering is as follows:

I'd like to flow the part1 over the top of the part2 clearly.

解决方案

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>

这篇关于一个长文件名流出其他文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！