Как обрезать текст, пока не нажата ссылка «еще»?

Question

У меня есть длинная серия абзацев, и я хотел бы урезать каждую до 2 строк (50 символов), и когда вы нажмете ссылку «больше», будет показан полный абзац.

Я использую библиотеку прототипов и рельсы.

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

Answer 1

Поместите ваш текст в div и установите высоту на желаемую высоту (с переполнением: скрыто). Когда нажата дополнительная ссылка, установите высоту div на div.scrollHeight. Если вы используете jquery или mootools, вы можете добавить аккуратный переход.

<div id="myText" style="overflow:hidden; height:50px;">Text here...</div>
<a href="javascript:;" onclick="showMore()">more</a>

<script type="text/javascript">
function showMore() {
    var mydiv = document.getElementById('myText');
    mydiv.style.height = mydiv.scrollHeight; 
}

// or with a transition (mootools)
function showMoreTransition() {
    new Fx.Tween($('myText'), {
        duration: 1000
    }).start('height', $('myText').getScrollHeight());
}
</script>

Answer 2

У вас есть проблемы с пролетами? Кажется, самый эффективный способ настроить это - заключить лишний тег в скрытый тег span. Вы можете даже обернуть всю операцию хорошим вспомогательным методом, чтобы сделать ее многократно используемой.

Предположим, прототип:

def sample_with_more(body, html_options = {})
  more_link = link_to_function(" More...", "$('more').hide(); $('hidden').show();', :id => 'more')


  content_tag(:div, html_options) do 
    body[0..49] + more_link + 
      content_tag(:span, body[50..-1], :style => "display:none", :id => "hidden")
  end
end

Answer 3

Приведенные выше ответы предполагают, что вы отправляете полный текст в браузер, а затем позволяете ему отображать только определенное его количество, обрезая его по вертикали. На самом деле это хорошая идея, поскольку усечение текста после определенного количества символов на самом деле не так просто, как кажется.

В раннем проекте у меня был длинный список усеченных текстов, и я не хотел отправлять их все в браузер в полном объеме. Здесь важно помнить, что если ваш текст может содержать управляющие или экранирующие символы (например, HTML, BBCode, HTML-сущности и т. Д.), Вам необходимо особенно внимательно относиться к ним.

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

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

Answer 4

Поскольку я парень из JQuery, вот код psuedo

• Выберите элемент, который содержит p
• Выберите после первых 50 символов и оберните div классом more-text
• Вставка с Js после <button>more</button>
• Добавьте кнопку события щелчка, которая устанавливает display: block или что-то более необычное на more-text
• Удалите кнопку или измените ее текст на «меньше» и измените необходимый код