防止元素寬度縮小

我有一個文本的工具提示，爲了控制工具提示相對於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

防止元素寬度縮小

回答

相關問題