麻煩與NOWRAP和最大寬度的絕對定位的元素

Question

我猜這兩個屬性實際上並不共同努力，但我的情況：

我試圖創建一個工具提示組件。我的工具提示是絕對定位的，因爲我不知道內容的長度是多少，所以沒有寬度。因此，與寬度相關的CSS，文本只是形成一個高大而瘦的列。我試過max-width，但是在它自己身上，那什麼都不做。所以我決定嘗試white-space: nowrap，雖然它很好地不包裝文本，但它似乎並沒有以一種有用的方式來承認最大寬度，文本反而超出了元素的邊界。

我想不出如何解決我的問題，如果有一個乾淨的解決方案。我希望有一個絕對定位的div，可以擴展以適應其內容，直到達到最大值，然後進行包裝。我看到的一個建議是將元素設置爲flexbox，但從我所知道的來看，這對IE來說並不好，所以我認爲在我的情況下不可行。有什麼建議？

.wrapper { 
 
    position: relative; 
 
    display: inline; 
 
} 
 

 
.info { 
 
    position: absolute; 
 
    bottom: 1.2em; 
 
    left: 0; 
 
}

<div class="wrapper"> 
 
    <span>[ ? ]</span> 
 
    <div class="info">Any long text can go in here to test what goes wrong with wrapping.</div> 
 
</div>

Answer 1

添加使用white-space:nowrap一個min-width:100%和white-space: nowrap;

.wrapper { 
 
    position: relative; 
 
    display: inline; 
 
} 
 
    
 
.info { 
 
    position: absolute; 
 
    min-width: 100%; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <span>[ ? ]</span> 
 
    <div class="info">Any long text can go in here to test what goes wrong with wrapping.</div> 
 
</div>

Answer 2

避免因爲這將限制你的文字一行。 max-width應該使用絕對顯示但不在內聯元素內的塊級元素。爲了解決這個問題，我把工具提示放在你的包裝塊之外，並使用javascript將它放置在鼠標位置。

這是您的問題的一個簡單的解決方案。點擊「打開工具提示」以顯示工具提示並移動滑塊以更改max-width的值。

showContext = function() { 
 
    var e = window.event; 
 

 
    var posX = e.clientX; 
 
    var posY = e.clientY; 
 
    var info = document.getElementById("info"); 
 
    info.style.top = posY + "px"; 
 
    info.style.left = posX + "px"; 
 
    info.style.display = "block"; 
 
} 
 

 
changeWidth = function(value) { 
 
\t \t var info = document.getElementById("info"); 
 
    info.style.maxWidth = value + "px"; 
 
}

.wrapper { 
 
    position: relative; 
 
} 
 

 
.info { 
 
    position: absolute; 
 
    max-width:300px; 
 
    display:none; 
 
    border:1px solid black; 
 
    background-color:white; 
 
} 
 

 
.range { 
 
    margin:10px 0px 10px 0px; 
 
    display:block; 
 
}

<div class="wrapper"> 
 
    max-width slider 
 
    <input id="range" class="range" type="range" min="100" max="600" oninput="changeWidth(this.value)"/> 
 
    <input type="button" value="open tooltip" onclick="javascript:showContext();" /> 
 
</div> 
 
<div id="info" class="info">Any long text can go in here to test what goes wrong with wrapping.</div>

Answer 3

我不能完全確定你的目標是什麼，因爲有事情很多矛盾的事情。但我會盡力，希望你能引導我對你的期望的解決方案：

https://jsfiddle.net/q7dyf6xh/

.wrapper { 
    position: relative; 
    display: run-in; 
} 

.info { 
    position: absolute; 
    max-width: 200px; 
    white-space: pre-line; 
} 

看一看這個小提琴，你可以看到工具提示現在有一個最大寬度。看看我使用的是什麼：

display: run-in;：顯示一個元素作爲阻止或內聯，根據上下文

white-space: pre-line;：空白的序列會崩潰到一個單一的空白。文本將在必要時換行，並在換行符

爲了更好地理解的事物如何運作這裏看看：

空白：如果您使用NOWRAP文本永遠不會換到下一線。文本繼續在同一行，直到遇到標籤！

這就是說你的max-width仍然在工作，但是用nowrap你溢出現在你的元素。試着給你的元素background-color，你會發現它實際上只有你的max-width定義的寬度。

這裏看看它是如何溢出的元素：https://jsfiddle.net/fcnh1qeo/

現在寬overflow: hidden只有你框內的文字會顯示出來。其他一切都被切斷了！在這裏看到：https://jsfiddle.net/0qn4wxkg/

我現在使用的是display: run-in;和white-space: pre-line;以及max-width: 200px，這將給你希望你的期望的解決方案。不知道使用它的上下文和代碼更多的是猜測而不是答案。但也許我可以引導你找到適合你需求的解決方案

乾杯！

Answer 4

不是那樣以前我自己有一個非常類似的問題。我使用flexbox修正了它在這裏的評論中已經提到的內容。

我的代碼如下所示：

.has-tooltip { 
    display: inline-flex; align-items: flex-start 
} 

.has-tooltip > .tooltip { 
    padding: 1em; 
    max-width: 300px; 
    background: #bdc3c7; 
    word-wrap: break-word; 
    transform: translate(-50%,-110%) 
} 

我也是爲了以防萬一複製到this fiddle這個要看看它。 （：。

Answer 5

你是正確的，這是行不通

這裏的，如果你被允許使用BR標記，有效的解決方案我已經提示合作很多次，這是我的最佳解決方案。

Codepen： https://codepen.io/btn-ninja/pen/JNJrgp

它的工作原理是利用空白NOWRAP使用CSS轉換：

<button type="button" class="btn btn-block hasTooltip"> 
    Tooltip on top 
    <i class="tip">Most tooltips are short<br>but you can add line breaks.</i> 
</button> 

<button type="button" class="btn btn-block hasTooltip right"> 
    Tooltip on the right. 
    <i class="tip">Tooltip on right<br>vertically centered.</i> 
</button>  

.hasTooltip .tip { 
    position: absolute; 
    bottom: 100%; left: 50%; 
    transform: translateX(-50%); } 

.hasTooltip.right .tip { 
    bottom: auto; left: 100%; top:50%; 
    transform: translateY(-50%); } 

翻譯允許絕對定位的工具提示水平或垂直居中對內容。帶有BR的空白空間實現了長內容的包裝，同時允許較短的工具提示與工具提示文本的寬度相匹配。

下面是完整的CSS：

.hasTooltip { 
    position:relative; } 

.hasTooltip .tip { 
    display:block; 
    background: #333; color: #fff; 
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); 
    font-size:inherit; 
    font-style:normal; 
    line-height: 1rem; 
    text-align:center; 
    padding: 8px 16px; 
    border-radius:4px; 
    margin-bottom:5px; 
    pointer-events: none; 
    position: absolute; 
    bottom: 100%; left: 50%; transform: translateX(-50%); 
    opacity: 0; 
    transition: opacity .34s ease-in-out; 
    white-space:nowrap; 
    z-index:99; } 

.hasTooltip .tip:before { 
    content: ""; 
    display:block; position:absolute; left:0; bottom:-5px; 
    width:100%; height:5px; } 

.hasTooltip .tip:after { 
    border-left: solid transparent 6px; 
    border-right: solid transparent 6px; 
    border-top: solid #333 6px; 
    bottom: -4px; 
    content: ""; 
    height: 0; 
    left: 50%; 
    margin-left: -6px; 
    position: absolute; 
    width: 0; } 

.hasTooltip:focus .tip, 
.hasTooltip:hover .tip { 
    opacity: 1; 
    pointer-events: auto; } 

.hasTooltip.right .tip { 
    bottom: auto; left: 100%; top:50%; transform: translateY(-50%); 
    margin-bottom:0; 
    margin-left:5px; } 

.hasTooltip.right .tip:before { 
    left:-5px; bottom:auto; } 

.hasTooltip.right .tip:after { 
    border-left: 0; 
    border-top: solid transparent 6px; 
    border-bottom: solid transparent 6px; 
    border-right: solid #333 6px; 
    bottom:auto; 
    left: -4px; 
    top:50%; 
    margin-left: 0; 
    margin-top: -6px; } 

Answer 6

display="runin"元素生成運行框。磨合元素就像內聯或塊一樣，取決於周圍的元素。即： 如果運行框包含一個塊框，與塊相同。 如果一個塊盒在引入框之後，引入框成爲塊框的第一個嵌入盒。 如果隨後出現一個內聯框，則導入框變成一個塊框。

pre-line空白序列已摺疊。線條以新行字符分隔，位於<br>，並根據需要填充線框。 下表總結了各種white-space值的行爲：

max-width CSS屬性設置元素的最大寬度。它可以防止width屬性的使用值變得比max-width.

.wrapper { 
    position: relative; 
    display: run-in; 
    top: 100px; 
} 


.info { 
position: absolute; 
bottom: 1.2em; 
left: 0; 
max-width: 200px; 
white-space: pre-line; 
background-color: #ddd; 

}