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:
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.
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