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
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
Not with CSS. You can use JavaScript to determine the size of the p
element and then add the ellipsis.
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.
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>