Restrict <p> to one line and ellipsize when necessary?

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>

CSS has white-space: nowrap (gives you single line) and text-overflow: ellipsis which should do exactly what you want. Unfortunately, text-overflow: ellipsis isn't supported by all browsers (Firefox being the exception in this case).

Devon Govett wrote a ellipsis plugin for jQuery which solves that.

Original blog: Text-overflow: ellipsis for Firefox via jQuery via Wayback Machine since the original blog was deleted.

Use this CSS class for your paragraph.

.single-line{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;
}

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.