jquery - 是否可以只隐藏溢出的文本而不是溢出的子绝对 div？

Question

我正在尝试实现一个带有树状列表的侧边栏。我希望树中的每个元素只填充一行 - 没有溢出，没有新行/自动换行。一个overflow: hidden;可能是一个很好的解决方案，但还有另一个要求 - 每行都有一个绝对 div 作为工具提示/弹出窗口（引导程序的弹出窗口），我不想隐藏或“剪辑”（它假设在某个顶层）。问题是弹出框是作为元素的子元素生成的，如果溢出则需要隐藏。如何实现与附加图像匹配的行为？

例子：

Answer 1

将每一行文本包装在另一个元素（例如 a<div>或<span>）中，然后应用overflow: hidden到它们，而不是父元素。

您当前的：

<div style="container" style="overflow: hidden">
    My text
    <div class="popup">My popup</div>
    Some more text
</div>

你应该做什么：

<div style="container">
    <div class="text" style="overflow: hidden">My text</div>
    <div class="popup">My popup</div>
    <div class="text" style="overflow: hidden">Some more text</div>
</div>

（请记住在您的样式表中执行此操作，而不是使用内联样式）

Answer 2

尝试z-index在您的弹出窗口上使用！:)

请参阅此处的用法和定义。

试试这个例子：http ://www.w3schools.com/CSSref/tryit.asp?filename=trycss_zindex

Answer 3

孩子应该有负边距并且不需要绝对显示，因为这样它不会影响父文本溢出。

示例：http: //jsbin.com/akivid/3/edit

<div class='out'>
TEXT 
    <div class='in'>          
      <span class='triangle-left'></span>
      TEXT
    </div>
</div>

CSS：

.out{
  width:100px;
  background-color:gold;
  word-wrap: break-word;
  padding:10px;
}
.in{
 background-color:lime;
  margin-right:-20px;
  margin-left:20px;
  width:40px;
  float:right;
  word-wrap: break-word;
  position:relative;
 padding:5px;
}
.triangle-left {
  position:absolute;
  left:-15px;
  top:10px;
  width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 15px solid lime;
    border-bottom: 10px solid transparent;
}