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

Ответ 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);
});

Ответ 2

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

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

Ответ 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>

Ответ 4

<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
}

это может быть оптимизировано и может быть использовано для использования одной из общих libs

Ответ 5

Вы можете сделать это с помощью некоторого 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>

script

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

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

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

Ответ 6

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

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

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

Ответ 7

Отправка комментария в ответ:

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

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

Ответ 8

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

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

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' });

Ответ 9

Установка скрытия div в 1em, а затем exapnd it onclick - это решение.

Проверьте это. Я не использовал 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/