当元素在父元素之外时，CSS 空格变成换行符

Question

所以，我正在尝试为我的网页制作一些工具提示代码。接下来的一个小时左右，我一直很沮丧，因为这根本不想工作。当我希望工具提示出现在它的父元素之外时，工具提示中的所有空格都会变成换行符。

/*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 所指定)。因此，一些可以包含在一行中的较短的词会被无间断地分组(例如，“Saves the”、“image as”、“a png file.”)。

工具提示收缩包装的原因是因为您没有给它明确的宽度(或最小宽度)。你已经给了它一个最大宽度，但是绝对定位的元素会尽可能地窄，而不是像正常流中的 block 级元素那样尽可能宽。