css - Prevent words from cutting off into a new line -
i'm wanting prevent each word within hover element cutting off new line.
here's jsbin of issue.
it's vital alignment of tooltip central hover element, , hover element width of long string of text becomes (no set width). how may this?
[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>
add white-space: nowrap;
tooltip
element:
[data-tooltip]:hover:after { white-space: nowrap; }
Comments
Post a Comment