Показать связь для open overflowed div

У меня есть div с ul внутри него. ul может содержать неизвестное количество элементов. Каждый элемент может содержать различное количество контента. Это могут быть длинные или короткие строки текста.

Example: http://codepen.io/anon/pen/Augrd

Этот DIV при загрузке страницы не должен превышать 100 пикселей в высоту.

То, что я хочу достичь: если внутри этого DIV слишком много контента, и оно переполнено, я хочу отобразить ссылку, на которую пользователь может щелкнуть, и «открыть» этот DIV, сделав его более высоким.

0
nl ja de

2 ответы

This detects the natural height of your <div> and automatically generates a "More..." link when the natural height of the <div> is greater than its current height (it does not show one if 100px is enough to show all the contents). You do not have to adjust the JavaScript for different heights of the <div>.

DEMO

Javascript

var main = document.getElementById("main");
var original_height = main.offsetHeight;
main.style.height = 'auto';
var natrual_height = main.offsetHeight;
main.style.height = original_height+"px";;
var more = document.getElementById("more");
if (natrual_height > original_height) {
  more.innerHTML = 'More...';
}
function show_more() {
  if (main.offsetHeight < natrual_height) {
      main.style.height = 'auto';
      more.innerHTML = 'Less...';
  } else {
      main.style.height = original_height+"px";;
      more.innerHTML = 'More...';
  }
}

HTML

<div id="main" class="main">
  • Something
  • LoremLoremLoremLoremLoremLoremLorem
  • Ipsum
  • 1234
  • LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem
  • 5678
  • 111111
  • abc
</div>
<div id="more">

</div>

CSS

.main {
  height: 100px;
  overflow: hidden;
}
2
добавлено
@Derp Вам может потребоваться установить фиксированный font-size и line-height в CSS и использовать кратность line-height как высоту <div> : jsfiddle.net/thUFP/5
добавлено автор Antony, источник
@Derp Если это отвечает на ваш вопрос, рассмотрите отметку его как принятого .
добавлено автор Antony, источник
Спасибо, Энтони, ваш код отлично работает. Но у меня есть еще один простой вопрос. Можно ли скрыть фрагмент текста, который не полностью помещен в DIV? Скриншот: cl.ly/image/0w0n1Q0k1T2Q
добавлено автор Derp, источник
Спасибо. Я отметил это!
добавлено автор Derp, источник

Я сделал обновленный html и поместил некоторый javascript. Надеюсь, это сработает для вас.

html:

<div class="main">
<div id="ulist">

  
  • Something
  • LoremLoremLoremLoremLoremLoremLorem
  • Ipsum
  • 1234
  • LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem
  • 5678
  • 111111
  • abc
  </div>
  <div id='more' onclick="opendiv()">
    open
  </div>
</div>

css:

.main {
  height: 100%;
  overflow: hidden;
}
#ulist {
  height: 100px;
  overflow: hidden;
}

javscript:

  function opendiv()
{
  if(document.getElementById('more').innerHTML == 'open')
  {
  document.getElementById('ulist').style.height = '100%';
  document.getElementById('more').innerHTML = 'close';
  }
  else
  {
  document.getElementById('ulist').style.height = '100px';
  document.getElementById('more').innerHTML = 'open';
  }
}
0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском