防止元件宽度收缩

时间:2015-10-16 10:44:59

标签: javascript html css

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

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

据我所知,工具提示不再“看到”身体元素,因此无法知道它可以伸展多少。但是,如果我需要对齐底部或右侧,则直接通过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>

2 个答案:

答案 0 :(得分:0)

仅查看父宽度缩小为0,工具提示文本仍然存在,但无法在屏幕上显示。这是因为父div(tip-outer)有left:100px,迫使工具提示向右移动,因此不可见。

尝试使用以下css将其修复为小屏幕。 Updated fiddle

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

答案 1 :(得分:0)

我不知道这是否可以适用于您的情况,但是将元素相对定位会使文本正确包装,即使它位于左下方的右下方。

http://jsfiddle.net/03gdomLt/3/

.tip-outer {
    position: absolute;
    top: 200px;
    left: 100px;
}
.tooltip {
    position: relative;
    left: 10px;
    top: 10px;
    border: 1px solid black;
    //white-space: pre-wrap;
}
<div class="tip-outer">
    <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>
</div>
<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse accumsan lectus eget egestas fringilla.</div>