悬停在椭圆跨度上时，防止文本重叠

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的内容（还请注意，{{1} }子级必须为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;
  }
    

Answer 2

悬停时

添加CREATE OR REPLACE FUNCTION MyFunction ( /* here i have five parameters and in the case that the query crashes, two of them i'm trying to pass blank or null */ COL in varchar2, -- This I pass a valid value INDEX in number, -- same here REF in varchar2, -- This one I'm trying to pass Blank ('') or Null and i get no result no matter wich one I pass. P in varchar2, BLOQ in varchar2 -- Same null or blank here ) RETURN TypeForFunctionTable IS result_table TypeForFunctionTable; i integer := 0; LOCAL_COL varchar2(4) := COL; LOCAL_REF varchar2(15) := REF; LOCAL_P varchar2(6) := P; LOCAL_BLOQ varchar2(1) :=; 。这将迫使下一个跨度向前移动，并为您的当前文本创建足够的空间。

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

希望这会有所帮助：）

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>