Ограничить <p>на одну строку и при необходимости эллипсисом?

У меня есть это:

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

есть ли способ, чтобы текст p ограничивался одной строкой и имел ли он эллипсоид, если он будет шире, чем родительский контейнер?

Спасибо

Ответ 1

Этот является тем, который вы ищете. Это плагин jQuery. После добавления этого плагина все, что вам нужно сделать, это обернуть его в div как это. Он автоматически обертывается на основе указанного вами размера текста.

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

Ответ 2

Вы можете ограничить текст одной строкой с помощью CSS.

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

РЕДАКТИРОВАТЬ: Согласно quirksmode, существует, по-видимому, text-overflow: ellipsis. Я никогда не использовал это и ничего не знаю об этом, но вы должны изучить его.

Ответ 3

CSS имеет white-space: nowrap (дает вам одну строку) и text-overflow: ellipsis, которые должны делать именно то, что вы хотите. К сожалению, text-overflow: ellipsis не поддерживается всеми браузерами (Firefox является исключением в этом случае).

Девон Говетт написал плагин эллипсиса для jQuery, который решает это.

Оригинальный блог: Text-overflow: эллипсис для Firefox через jQuery через Wayback Machine, так как исходный блог был удален.