Stop li.group rows from wrapping and breaking the layout

[GoogleCodeExporter]

An li.group row containing a large amount of text will wrap and break the 
layout. The group 
background image and css only really works when displaying a single line of 
text.

My fix prevents wrap, adding an overflow ellipsis if required.

iui.css changes at line 166:
body > ul > li.group {
    ...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Example usage (no code changes from existing methods necessary):

<ul id="thread" title="Topic" otherButtonLabel="Reply" 
otherButtonHref="reply.php">
    <li class="group">One line of text that would have wrapped but is now truncated</li>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
</ul>

Try this before and after the CSS fix.

Original issue reported on code.google.com by matt.sep...@gmail.com on 9 May 2008 at 10:58

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This code can be see in action at: http://www.gingerbeardman.com/iphone/

Original comment by matt.sep...@gmail.com on 9 May 2008 at 11:14

• Added labels: ****
• Removed labels: ****

[GoogleCodeExporter]

See issue 171 for another approach that makes a simple css fix to allow the 
background image to repeat 
vertically.

Original comment by rogersp...@yahoo.com on 18 Oct 2009 at 10:45

• Added labels: ****
• Removed labels: ****