Forum Bugs

white-space:nowrap does not go well with text-align:justify

Johann
During implementation of a simple source code review tool, I stumbled over the following problem:

I have source code lines and review comment boxes interleaved, where the comment boxes are very compact (div element with fixed width, a height of one single line and white-space:nowrap and overflow:hidden).
When the mouse hovers over the comment box, then the full content is shown (auto width/height and white-space:pre).

See the code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Prince CSS nowrap TEST</title>
      <style type="text/css">
        body { text-align:justify; }
        div.code {
          font: 12px Consolas,fixed;
        }
        div.code p { white-space:pre; border:0; padding:0; margin:0;}
        div.code ul { display:block; list-style-type:none; border:0; padding:0; margin:0; }
        div.code li { display:inline-block; width:50mm; height:2ex;}
        div.comment {
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
          width:50mm; height:2ex;
          border:thin solid black; background:lightyellow;
          }
        div.comment:hover { 
          white-space:pre;
          position:absolute; 
          width:auto; height:auto;
          max-width:80mm; max-height:80mm;
          }
      </style>
    </head>
    <body>
      <div class="code" >
        <p>/* This is a    C++ source code line ...*/</p>
        <ul>
          <li>
            <div class="comment">
Plain text comment
White space is significant!
  - one
  - two
  - three
            </div>
          </li>
          <li>
            <div class="comment">Another comment
with some content.
            </div>
          </li>
        </ul>
      </div>
    </body>
</html>


Surprisingly, Prince squeezes all the text content into the compact comment box, instead of truncating it.

After some time of analysis, I realized that the text-align:justify (of the body element) was inherited all the way down to the comment box. When that rule is removed (or changed to "left") the presentation is as intended.

- - -
Johann

mikeday
Thank you, we will review this behaviour.