tags:

views:

63

answers:

3

Hi,

I have this:

<ul>
  <li>
    <p>Some long text here</p>
  </li>
</ul>

is there a way to get the p text to be restricted to a single line, and have it ellipsize if it's going to be wider than the parent container?

Thanks

A: 

Not with CSS. You can use JavaScript to determine the size of the p element and then add the ellipsis.

Aaron Digulla
+2  A: 

You can restrict the text to one line using CSS.

<p style="white-space: nowrap;"></p>

EDIT: According to quirksmode there's apparently a text-overflow: ellipsis. I've never used this and don't really know anything about it, but you should look into it.

DLH
Ok I'm trying this, seems to work except in FF: http://www.electrictoolbox.com/ellipsis-html-css/
+2  A: 

This is the exact one you are looking for. Its a jQuery plugin. Once you add this plugin, all you have to do is wrap it in a div like this. It automatically wraps based on the text size you specify.

<ul>
  <li>
    <div class="expandable">
        <p>Some long text here</p>
    </div>
  </li>
</ul>
Bragboy