防止将鼠标悬停在椭圆跨度上时文本重叠

Question

我正在尝试构建一系列包含多个跨度和长文本的div。部分文本呈椭圆形，但在浏览时，新可见的部分与下一个范围重叠。

这是一个例子：

		div.one {
		display: inline-block;
		width: 100%;
		}
		div.one span {
		float: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 75px;
		margin-right: 10px;
		}
		
		div.one span:hover{
		height: auto;
		overflow:visible;
		}

	<div class="one">
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>   
	</div>

我尝试在悬停时更改颜色背景，以便隐藏背景文本，但它不会扩展到新可见的文本。我应该如何处理？有哪些选择？这些是我的问题。

Answer 1

我不太清楚你的预期结果是什么，所以这里有两个版本：顶行的每个跨度水平扩展以显示其全文并覆盖在其旁边的跨度之上。第二行的文本垂直扩展。

为了使第一个版本正常工作，您会注意到父容器上使用了direction: rtl;属性 - 这会导致此div的内容(另请注意，必须inline-blockspan子项而不是float才能正常工作(以相反的顺序显示。这样做可以让重叠正常工作，因为它将前面每个元素的z-index优先级设置得更高。

div.one {
		display: block;
direction: rtl;
float: left;
height: 30px;
		}
		div.one > span {
		display: inline-block;
		width: 75px;
		margin-right: 10px;
direction: ltr;
position: relative;
		}

div.one > span > span {
width: 100%;
position: absolute;
z-index: 2;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: white;
}
		
		div.one > span:hover > span {
		width: auto;
		overflow: visible;
		}

div.two {
display: block;
clear: left;
padding-top: 20px;
}
div.two > span {
		float: left;
		width: 75px;
		margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: white;
	}
div.two > span:hover {
height: auto;
display: block;
white-space: normal;
}

<div class="one">
		<span><span>Some example of a very very long text</span></span>
		<span><span>Some example of a very very long text</span></span>
		<span><span>Some example of a very very long text</span></span>
		<span><span>Some example of a very very long text</span></span>
		<span><span>Some example of a very very long text</span></span>
		<span><span>Some example of a very very long text</span></span>
	</div>

<div class="two">
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
	</div>

Answer 2

在悬停时添加width:auto; display:block;。它将强制下一个跨度向前移动并为当前文本创建足够的空间。

div.one {
display: inline-block;
width: 100%;
}
div.one span {
float: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
}
div.one span:hover{
height: auto;
overflow:visible;
width:auto;
display:block;
}

<div class="one">
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>   
</div>

希望这有帮助：(

Answer 3

这是你要找的吗？

<div class="one">
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>
<span>Some example of a very very long text</span>   
</div>
div.one {
width: 100%;
}
div.one span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 75px;
margin-right: 10px;
vertical-align: middle;
}
div.one span:hover{
width: auto;
overflow: visible;
}

Answer 4

		div.one {
		display: inline-block;
		width: 100%;
		}
		div.one span {
dysplay: block;
		float: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 10%;
		}
		
		div.one span:hover{
cursor:pointer;
width: 250px;
transition: width 2s;
		height: 20px;
		overflow:visible;
		}

	<div class="one">
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>
		<span>Some example of a very very long text</span>   
	</div>