Плагин jQuery dotdotdot не работает

Я пытаюсь показать список комментариев на панели с помощью плагина dotdotdot, но результат не приветствуется:

Комментарии

Снизу HTML-код:

<li>
    <h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
            outcome="/profile.xhtml" type="submit"
            style="text-decoration:none;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
        <f:param name="userId" value="#{Comment.comauthorId}"/>
    </h:link>

    <div id="wrapper">
        #{Comment.commentText}
    </div>
    <br></br>
    <abbr class="timeago" title="#{Comment.commentDate}"
          style="color: #778899;font-size: 10px;">
    </abbr>

    <br/>
</li>

И ниже код JS:

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
})

Если я решу проблему переполнения, я могу решить проблему с вертикальным размером, но что-то не так с dotdotdot, я думаю. Позвольте мне показать вам еще одну странную вещь:

dotdot2

Как видите, кажется, что значение ширины div (оболочки) вычислено правильно, но текст продолжает переполняться. В чем может быть причина?

Спасибо за помощь.

Источник

6 ответов

Решение

Попробуй это

div#wrapper{
   word-wrap: break-word;
}
Источник

У меня была похожая проблема, и в конце концов я удалил этот плагин и начал использовать этот CSS:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Чтобы заставить его работать, вы должны определить width,

Источник

На основании вашего скриншота, я думаю, у вас есть более одного <div id="wrapper">, Поскольку идентификаторы должны использоваться только один раз на страницу, плагин, вероятно, не выполняет их итерацию правильно. Попробуйте изменить это на класс <div class="wrapper"> и обновите JS, чтобы:

$(document).ready(function() {
    $(".wrapper").dotdotdot({
        //  configuration goes here
    });
})

Ссылка на скрипку: http://jsfiddle.net/ryanbrill/RgHRs/

Источник

По умолчанию текст переносится внутри контейнера. Если ваш текст не переносится, то существует какой-то CSS, который его вызывает, будь то напрямую (например, white-space: nowrap) или косвенно (например, position: absolute). Если вам необходимо явно установить свойство CSS для восстановления этого поведения по умолчанию, например, word-wrap: break-word, тогда у вас должно быть свойство CSS, которое уже влияет на ваш текст, так как это не является требованием по умолчанию.

Как вы указали в ваших комментариях, у вас есть контейнер с position: absoluteи это сломается dotdotdot,

Возможно, вам удастся решить эту проблему, поместив элемент в другой контейнер (в абсолютно позиционированный контейнер), ширина которого равна ширине контейнера.

Источник

В моем случае dotdotdot не работал для элементов, потому что они были изначально невидимы, а затем отображались после выбора вкладки. Поэтому мне пришлось перенести инициализацию dotdotdot на некоторые onTabShown событие.

Источник

dotdotdot.js утверждает, что поддерживает перенос / разбиение на уровне букв, как вы описываете, если вы указываете перенос на уровне букв:

$('.my_elements').dotdotdot({ wrap: 'letter' });

Однако реализация кажется глючной. Вам может понадобиться более одного слова, чтобы это работало. Смотрите этот пример:

http://jsfiddle.net/pqz5b408/1/

Источник
Другие вопросы по тегам