Question

我想阻止悬停元素中的每个单词切换到一个新行。

工具提示的对齐对于悬停元素是至关重要的，并且悬停元素的宽度应该是文本字符串的长度（没有设置宽度）。我怎么能这样做？

[data-tooltip]:hover {
    position:relative;
}
[data-tooltip]:hover:after {
    margin-top:7px;
    padding:8px;
    content:attr(data-tooltip);
    text-align:center;
    color:#fff;
    border-radius:3px;
    background:rgba(0, 0, 0, .8);
}
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    position:absolute;
    top:100%;
    left:50%;
    -webkit-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
    transform:translateX(-50%)
}
[data-tooltip]:hover:before {
    margin-top:2px;
    content:'';
    border-right:6px solid transparent;
    border-bottom:6px solid rgba(0, 0, 0, .8);
    border-left:6px solid transparent;
}

<span data-tooltip="boo">boo</span>
<span data-tooltip="boo boo">boo</span>
<span data-tooltip="boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo">boo</span>
<span data-tooltip="boo boo boo boo boo">boo</span>

Answer 1

将white-space: nowrap;添加到tooltip元素：

[data-tooltip]:hover:after {
    white-space: nowrap;
}

Answer 2

使用css：

white-space：nowrap;

防止词语切入新的界限

2 个答案: