jQuery - добавляет эллипсы, ломает линию, но не усекает - PullRequest
Новая
       7

jQuery - добавляет эллипсы, ломает линию, но не усекает

1 голос
/ 23 сентября 2011

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

Что было бы лучшеспособ сделать это?ThreeDots http://tpgblog.com/threedots, кажется, очень хороший плагин с большим количеством опций, но я просто не знаю, как настроить его под свои нужды.

Спасибо за любую помощь, которую вы можете оказать.

1 Ответ

1 голос
/ 23 сентября 2011

Укажите высоту для DIV, затем используйте text-overflow: ellipsis и предотвратите использование CSS для переноса строк.

Вот простой пример: 

.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}

Конечно, всегда есть кто-тосоздавая проблемы, и на этот раз это Firefox.Вы должны привязать файл к CSS.

Это проще, чем вы думаете.Просто создайте новый текстовый файл и назовите его ellipsis.xml.Затем вставьте его в любое место на своем веб-сервере, где вы можете сослаться на него. 

<?xml version="1.0"?>
<bindings 
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <binding id="ellipsis">
  <content>
    <xul:window>
     <xul:description crop="end" xbl:inherits="value=xbl:text"><children/>      
         </xul:description>
    </xul:window>
  </content>
</binding>
</bindings>

Затем в вашем CSS сделайте следующее: 

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Это быстрое сокращение, а для большегоинформация, посмотрите на этого парня:

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Кстати: если вы считаете, что плагин Threedots - более простой выбор, я говорю, что сделайте это.

...