Get hands-on training for JIRA Software, Confluence, and more at Atlassian Summit Europe. Register now ›

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:
overflow_1_ff.PNG
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!

First Attempt

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:

<div style="overflow:hidden; text-overflow: ellipsis; height: 1em;">
Really really long text to trim...
</div>

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:
overflow_2_ff.PNG
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).

Second Attempt

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:

<div style="overflow:hidden; text-overflow: ellipsis; white-space:nowrap;">
Really really long text to trim...
</div>

After applying this change, in Firefox it looks like the following:
overflow_3_ff.PNG
However in IE, it blows out wide:
overflow_3_ie.PNG

Third Attempt

I then tried the table-layout: fixed; approach also from http://www.blakems.com/archives/000077.html. Which in HTML is:

<table style="table-layout:fixed; width:100%;" cellpadding="0">
<tr>
<td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
Really really long text to trim...
</td>
</tr>
</table>

This approach adds extra HTML tags but the result works across firefox, IE 6/7, Opera and Safari. In firefox it looks like:
overflow_4_ff.PNG
and in IE (surprisingly the one that looks the best compared to the other browsers because of the trailing ellipsis):
overflow_4_ie.PNG

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now