javascript - 防止元素宽度缩小

Question

我有一个带有一些文本的工具提示，为了使用 CSS 控制工具提示相对于光标的位置，我将它放在一个零大小的 div 中。 Javascript 移动外部 div，工具提示可以通过任何顶部/右侧/左侧/底部属性对齐，具体取决于它应该放在哪一侧。

但是，这会产生一个新问题 - 工具提示内容现在尝试使用尽可能小的宽度。我无法禁用自动换行，因为它需要适合移动屏幕。没有外部容器，它可以完美地工作，一直延伸到 window 边缘。有没有办法在计算换行符时忽略外部容器？

据我所知，工具提示不再“看到”body 元素，因此它不知道它可以拉伸(stretch)多少。但是，如果我需要对齐底部或右侧，直接通过 Javascript 控制工具提示位置会更加复杂 - 我必须考虑工具提示大小(可以根据其位置更改)，或者设置底部/右侧属性并考虑窗口大小.

这是一个例子:http://jsfiddle.net/03gdomLt/1/
第一个工具提示正常工作，而第二个工具提示尝试缩小到零宽度。

.tip-outer {
    position: absolute;
    top: 200px;
    left: 100px;
}
.tooltip {
    position: absolute;
    left: 10px;
    top: 10px;
    border: 1px solid black;
}

<div class="tip-outer">
    <div class="tooltip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
    </div>
</div>
<div class="tooltip">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra feugiat augue, non pretium massa ultricies vel. In hendrerit tellus.
</div>

Answer 1

看起来只有父宽度缩小到 0，工具提示文本仍然存在，但无法适应屏幕。这是因为父 div (tip-outer) 具有 left:100px，这会强制工具提示向右移动，因此不可见。

尝试使用下面的 css 来修复它以适应小屏幕。 Updated fiddle

@media only screen 
and (max-width : 400px) {
    .tip-outer .tooltip{
        left: -90px;
    }
}