CSS-Whitespaces werden zu newline, wenn Element außerhalb des übergeordneten Elements steht

Question

Also versuche ich, einen kleinen Tooltip-Code für meine Webseite zu erstellen. Ich bin für die nächste Stunde frustriert, weil das einfach nicht funktionieren will. Wenn ich möchte, dass der Tooltip außerhalb des Elements angezeigt wird, zu dem er weitergeleitet wurde, werden alle Leerzeichen im Tooltip zu Zeilenumbrüchen.

/*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

Sie werden feststellen, dass nicht alle Räume newlines drehen; die meisten von ihnen sind, aber nicht alle. Was passiert, ist, dass das Tooltip-Pseudoelement, das absolut positioniert ist, shrink-wrapping gerade so groß ist, dass es das längste Wort in einer einzelnen Zeile enthält, ohne es auseinander zu brechen (wie durch word-break: normal oder word-break: keep-all spezifiziert). Daher werden einige kürzere Wörter, die in einer einzelnen Zeile enthalten sein können, ohne Unterbrechungen gruppiert (z. B. "Speichert das", "Bild als", "eine PNG-Datei").

Der Grund dafür, dass der Tooltip zum Schrumpfen ist, ist, dass Sie ihm keine explizite Breite (oder minimale Breite) gegeben haben. Sie haben ihm eine maximale Breite gegeben, aber absolut positionierte Elemente werden versuchen, so schmal wie möglich zu sein, und nicht so breit wie möglich, wie Elemente auf Blockebene im normalen Fluss.