要素が親の外側にあるとき、CSSの空白は改行に変わります。

Question

私は自分のWebページ用の小さなツールチップコードを作ろうとしています。私は次の1時間かそれ以上の時間に欲求不満になってきました。なぜならこれはちょうど働きたくないからです。ツールチップがその親要素の外側に表示されるようにするには、ツールチップのすべての空白が改行に変わります。

/*css*/ 
*[tooltip=left]:after{ 
    content: attr(data-tooltip); 
    padding: 10px; 
    border-radius: 5px; 
    background: white; 
    position: absolute; 
    display: block; 
    max-width: 200px; 
    min-height: 15px; 
    word-spacing:normal; 
    word-break: keep-all; 
    top: 50%; 
    left: calc(100% + 20px); 
    transform: translateY(-50%); 
    z-index: 999; 
} 
*[tooltip=left]:hover:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    display: inline; 
    white-space: pre-line; 
    transform: translateY(-50%); 
    margin-left: calc(100% + 10px); 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px 10px 10px 0; 
    border-color: transparent #ffffff transparent 
} 


/*The actual text: 
Saves the rendered image as a png file. Notice that the resolution is the same as the document window.*/ 

Answer 1

あなたはないすべてスペースが改行に回っていることに気づくでしょう。それらのほとんどはすべてではありません。何が起こっているのかは、絶対的に配置されているツールチップの擬似要素が、shrink-wrappingであり、一番長い単語を分割することなく（word-break: normalまたはword-break: keep-allで指定されているように）格納できます。したがって、1行に含めることができる短い単語は、区切りなしでグループ化されます（たとえば、「保存」、「イメージとして」、「pngファイル」など）。

ツールチップがシュリンクラッピングする理由は、明示的な幅（または最小幅）を指定していないためです。最大幅を指定しましたが、絶対配置された要素は、通常のフローのブロックレベル要素のようにできるだけ狭くしようとします。