Currently (Pre JIRA 3.11), linked issues on the view issue page of JIRA have their summary trimmed down to 40 characters with trailing ellipsis on the server side and looks something like this:
Notice the wasted white space? The white space also grows as the browser resolution is enlarged as the summary is always showing the first 40 characters only!
So as part of a fix for JRA-13102 to maximise the use of the wasted white-space, I started off with copying the behaviour of JIRA’s minimised comments. Which looks something like this in HTML:
As opposed to the original approach of trimming at 40 characters on the server side, this will put the whole text and simply hide the part of the text that is longer than the div (on the client side). So if the user increases their browser resolution, the browser will automatically display more/less of the text. Applying this to the linked issues table in JIRA we now have:
This is great but it has 2 down falls
1. The trimming is done on a word level (so if the whole word doesn’t fit, it truncates the word and not in the middle of the word).
2. No trailing ellipsis. This can cause confusion if the last word gets truncated and leaves a large section of white space as shown in the above screenshot (See: HSP-2 & HSP-3).
After more search to solve the missing ellipsis problem, I came across text-overflow: ellipsis CSS property. This property adds trailing ellipsis if the text overflows! Unfortunately, this is only supported in Internet Explorer and its behaviour cannot be mimicked easily in other browsers. (For once there is something in IE that is missing in firefox).
Since text-overflow:ellipsis is only supported in IE, I set off again searching and came to http://www.blakems.com/archives/000077.html which had the trimming done on a character level by using white-space:nowrap instead of height:1em to make the text appear on a single line:
I then tried the table-layout: fixed; approach also from http://www.blakems.com/archives/000077.html. Which in HTML is:
This approach adds extra HTML tags but the result works across firefox, IE 6/7, Opera and Safari. In firefox it looks like:
and in IE (surprisingly the one that looks the best compared to the other browsers because of the trailing ellipsis):