Как вы показываете только первую строку текста div и расширяете по клику?

Question

Я хочу показать только первую строку блока обернутого текста, а затем показать весь блок при клике. Кроме того, я хотел бы знать, как переключить его обратно в компактную однострочную версию одним щелчком мыши.

Есть ли простой способ сделать это через css + javascript? Я использую jQuery.

Answer 1

Предполагая, что вы не хотите использовать какую-либо библиотеку JavaScript (которая нечетная ).

См .: http://jsfiddle.net/JUtcX/

HTML:

<div id="content"></div>

CSS:

#content {
    border: 1px solid red;
    height: 1em;
    padding: 2px; /* adjust to taste */
    overflow: hidden    
}

JavaScript:

document.getElementById("content").onclick = function() {
    this.style.height = 'auto';
}

---

Кроме того, если вы хотите использовать среду JavaScript, такую ​​как jQuery , вы можете анимировать ее.

См .: http://jsfiddle.net/JUtcX/2/

$('#content').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).animate({height: fullHeight}, 500);
});

Answer 2

Это легко сделать с помощью CSS + JavaScript.Вам просто нужно установить высоту div на высоту отдельной строки и скрыть все переполнения.Затем, когда пользователь нажимает на элемент div, используйте красивый обработчик анимации для выполнения скрытого или другого аналогичного эффекта, чтобы показать полное содержимое элемента div.

Вот очень простой пример (без анимации):http://jsfiddle.net/9Lw6T/

Answer 3

$(document).on('click', '.collapsible', function () {
  $(this).toggleClass('collapsed');
});

p {
  cursor: pointer;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>

Answer 4

Установка скрытия div на 1em, а затем его расширение по щелчку - это решение.

Проверьте это.Я не использовал библиотеку JS.

CSS

.expandable{
    height:1.2em;
    overflow:hidden;
}

HTML

<div class="expandable" onclick="expand(this)">Your text here</div>

JS

window.expand = function(el) {
    el.style.height = "auto";
}

Вот скрипка

http://jsfiddle.net/RwM8S/1/

Answer 5

Этого будет достаточно:

Чтобы скрыть все, кроме первой строки:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';

Чтобы показать весь текст:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';

Или, если выдолжны были использовать jQuery:

$('#theDiv').css({ height: '1em', overflowY: 'hidden' });

$('#theDiv').css({ height: 'auto', overflowY: 'visible' });

Answer 6

Размещение моего комментария в качестве ответа:

Другим подходом может быть определение класса height: 1em; overflow-y: hidden;, а затем добавление / удаление его по клику с помощью JavaScript.

Или, может быть, вы также можете обработать это в :active -pseudo-классе, обернув свой <div> тегом <a>, поэтому никакой javascript не понадобится. Но тогда div снова рухнет при потере фокуса.

Answer 7

В CSS установите размер div для размера строки (важно: вам может понадобиться использовать атрибут межстрочного интервала, чтобы получить правильное заполнение в нижней части второй строкой).

Я не знаюо щелчке, но вы можете использовать :hover в CSS, чтобы изменить стиль (сбросить межстрочный интервал, сбросить размер div и переполнение до правильных значений), чтобы получить эффект hover-show.

Или вы можете использовать JavaScript иизменить этот CSS на клик (легко сделать с помощью jQuery).

Answer 8

Вы можете сделать это с помощью некоторого jQuery.

<div id="a">
    <span id="first">This is the first line (read more)</span>
    <br />
    <span id="rest">This is the rest of the text</span>
</div>

Сценарий

$('#rest').hide();

$('#first').click(function(){
    $('#rest').show();        
});

http://jsfiddle.net/jasongennaro/dC32A/

Answer 9

<div id='a' onclick='toggletext'>first line<br /></div>

function toggletext(){
   var html= document.getElementById('a').innerHTML;
   if(html=='first line<br />'){
       html = 'first line<br />next lines<br />next lines<br />';
   }else{
       html = 'first line<br />';
   }
   document.getElementById('a').innerHTML = html
}

это можно оптимизировать и использовать одну из общих библиотек