html - 将鼠标悬停在省略跨度上时防止文本重叠

Question

我正在尝试构建一系列包含多个带有长文本的 span 的 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 的内容(另请注意，span 子级必须是 inline-block 而不是 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>