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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -