是否可以隐藏溢出的文本但不会溢出子绝对div？

Question

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

示例：

Answer 1

将另一个元素（例如<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！ ：）

查看用法和定义here。

也请尝试此示例：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;
}