title: CSS whitespaces turn into newline when element is outside parent
body: <p>So, I'm trying to make a little tooltip code for my webpage. I've been getting frustrated for the next hour or so, because this just does not want to work. When I want the tooltip to appear outside the element it's parented to, all the whitespaces in the tooltip turn into newlines.</p>
  
  <p><a href="https://i.stack.imgur.com/IbhHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbhHQ.png" alt=""></a></p>
  
  <pre><code>/*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.*/
  </code></pre>