防止元素宽度缩小

我有一个文本的工具提示，为了控制工具提示相对于CSS的光标位置，我把它放在一个零大小的div内。 Javascript会移动外部div，并且工具提示可以通过任何顶部/右侧/左侧/底部属性进行对齐，具体取决于它应放置在哪一侧。防止元素宽度缩小

但是，这会产生一个新问题 - 工具提示内容现在尽量使用尽可能小的宽度。我无法禁用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>

来源

2015-10-16 riv

使用最小宽度在CSS – brk

添加演示的例子... –

@ user2181397我不能 - 如果我是太小了，它仍然会包裹时它不应该;如果我把它放得太宽，它会在屏幕外伸展，而不是它可以包裹。我需要它延伸到可用的宽度，如果需要的话。 – riv

只将父宽度缩小为0，工具提示文字仍然存在但无法放在屏幕上。这是因为父div（tip-outer）有left:100px这是迫使工具提示向右移动，因此不可见。

尝试在css下面修复它的小屏幕。 Updated fiddle

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

来源

2015-10-16 11:38:25 Ranjana

我认为他想要的行为，他只是希望当绝对定位元素走向边缘时文本缩小。 – Persijn

我不知道这是否可以或不能为你的情况下工作，但元件相对于定位不使文本能够正确换即使它位于左上角右下角。

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>

来源

2015-10-16 11:42:45 Persijn

防止元素宽度缩小

回答

相关问题