絶対配置要素

Question

私は、これら2つの属性は、実際に一緒に動作しません推測している上NOWRAPおよび最大幅のトラブルが、私の状況：

は、私がツールチップコンポーネントを作成しようとしています。私のツールチップは絶対に配置されていて、コンテンツの長さがわからないので、幅はありません。したがって、幅に関連するCSSでは、テキストはちょうど背の高い、痩せた列を形成します。私はmax-widthを試しましたが、それ自体は何もしません。だから私はwhite-space: nowrapを試してみることにしましたが、テキストをラップしていないのにもかかわらず、有用な方法でmax-widthを尊重しているようではなく、テキストが要素の境界からはみ出しています。

清潔な解決策がある場合は、私の問題を解決する方法を考えることはできません。私はそれがラップするどの時点でそれが最大になるまでコンテンツにフィットするように展開する、絶対配置されたdivを持っていたいと思います。私が見た1つの提案は、要素をフレックスボックスにすることでしたが、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

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

ことが1行にテキストを制約されますようwhite-space:nowrapを使用することは避けてくださいを追加します。 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がまだ動作していると言っていますが、今度はあなたがオーバーフローあなたの要素です。あなたの要素に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：それはCSSで空白NOWRAPを使用して動作 https://codepen.io/btn-ninja/pen/JNJrgp

翻訳：

<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を使用したホワイトスペースは長いコンテンツのラップを実現し、短いツールチップをツールチップのテキストの幅と一致させることができます。

.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"要素は、実行中のボックスを生成します。

はここで完全なCSSです。ランイン要素は、周囲の要素に応じて、インラインまたはブロックのように動作します。つまり： ランインボックスにブロックと同じブロックボックスが含まれている場合。 実行ボックスの後にブロックボックスが続く場合、実行ボックスはブロックボックスの最初のインラインボックスになります。 インラインボックスが続く場合、実行ボックスはブロックボックスになります。

pre-line空白のシーケンスが折りたたまれています。行は、改行文字（<br>）で折り返され、必要に応じて行ボックスを埋める。 次の表は、さまざまなwhite-space値の動作をまとめたものです。

max-width CSSプロパティは要素の最大幅を設定します。これは、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; 

}