Ответ 1

Использование текстовое переполнение CSS и Линия зажима:

div {
  display: block; 
  display: -webkit-box;
  width: 200px;
  height: 40px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding:20px;
  overflow:hidden;
  text-overflow: ellipsis;
}

Пример в реальном времени: http://jsfiddle.net/5Z4Wu/

Ответ 2

То, что вы хотите, - это многократное нажатие. К сожалению, CSS пока только позволяет зажимать первую строку текста. Webkit/Opera позволяет зажимать несколько строк, но я подозреваю, что здесь вам не поможет.

Существует несколько обходных решений (даже один который является все-CSS): http://css-tricks.com/line-clampin/

Самый надежный, однако, похоже, использует javascript для задачи: Clamp.js.

Ответ 3

Проверьте Fiddle Я создал себя:

script в скрипте устанавливает ссылку Знать больше точно в правом нижнем углу набора ограниченной области/переполнения (скрытого) в соответствии с размером экрана. Нажав кнопку Знать больше просматривается видимость переполненного содержимого.

JQuery

/*Only change required in this script if id name of div containing text is different*/
var txtCont = $('#wrappingText');
/*******************************/
var lines = txtCont.get(0).getClientRects();
txtCont.css('display','inline-block');

jQuery.fn.exists = function(){return this.length>0;}

function debugTxt(txt)
{
    var lineHeight = txtCont.css('line-height').replace("px", '');
    var txtContHeight = txtCont.height();
    txtCont.parent().height(lineHeight*Math.floor(txtContHeight/lineHeight));
    if (txt*lineHeight>txtContHeight){
       if(!txtCont.parent().find('.knowMore').exists()){
       txtCont.parent().append('<div class="knowMore">Know </div>');
    }}
    else
       txtCont.parent().find('.knowMore').remove();
}
debugTxt(lines.length);

$('.knowMore').click(function(){
    $(this).prev().toggleClass("visible");
    $(this).toggleClass('knowLess');
    $(this).parent().toggleClass("parentClick");
});

Для получения правильного вывода требуется использование соответствующего CSS. Ниже приведен параметр CSS, используемый в скрипте:

#wrapper{
    position:relative;
}
html,body,#wrapper,#wrappingText{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
#wrappingText{
    display:inline;
    overflow:hidden;
}
.knowMore{
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:white;
    color:blue;
    cursor:pointer;
}
.knowMore:before{
    content:"...";
}
.knowMore:after{
    content:"More";
}
.knowLess:before{
    content:"";
}
.knowLess:after{
    content:"Less";
}

.visible{
    overflow:visible !important;
}

.parentClick{
    width:auto !important;
    height:auto !important;
}

Обновление

<div class="container">
.
.
.
<div class="wrapper">
<div class="wrappingText"></div>
</div>
.
.
.
</div>

Вышеупомянутая структура должна использоваться для плагина, который используется в скрипте. Вы можете использовать имена классов, которые вы хотите. В приведенном выше HTML wrappingText находится div, содержащий текст. Он должен быть завернутый в другой div, в приведенном выше HTML wrappingText завернут в div с именем класса wrapper.

Для использования плагина вам просто нужно вызвать плагин с именем класса div, содержащим текст, и передать основной родительский класс name как параметр:

$('.wrappingText').knowMoreLess('.container'); // CALLING PLUGIN

Другие инструкции и сведения добавляются в комментарии в обновленной скрипке ниже:

Обновлено Fiddle