Как отображать только первые несколько строк div (clamping)?

Ответ 1

Алгоритм для вычисления всех факторов с использованием только javascript будет слишком сложным.

С помощью css3 существует линейный зажим

Но это работает только в современных браузерах.

p{
 margin:20px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

DEMO

http://jsfiddle.net/MM29r/

это позволяет вам установить количество строк, которые вы хотите отобразить, перед добавлением 3 точек.

теперь вы хотите 300px... так:

var p=document.getElementsByTagName('p')[0],
lineheight=parseInt(window.getComputedStyle(p).getPropertyValue("line-height"));
var lines=Math.floor(300/lineheight);
p.style['-webkit-line-clamp']=lines;

поэтому это дает вам элемент размером 300 пикселей или менее

ДЕМОНСТРАЦИИ

http://jsfiddle.net/MM29r/1/

http://jsfiddle.net/MM29r/2/

НЕОБХОДИМЫЕ ЦЕННОСТИ: line-height

Теперь, если вы хотите сделать коробку ровно 300px height, просто добавьте поля или paddings в параграфы. Но это зависит от ваших предпочтений.

Если у вас есть вопросы, просто спросите.

Примечание

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

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

но затем каждый браузер отображает шрифты по-другому.

ИЗМЕНИТЬ

Здесь показан другой способ отображения частичного контента. Использование max-height и -webkit-column-count

fooobar.com/questions/16021/...

DEMO

http://jsfiddle.net/HNF3d/10/

поддержка немного выше, чем line-clamp, и вы можете отображать весь контент.

EDIT2

Затухающее изображение внизу.

p{
 width:300px;
 max-height:300px;
 overflow:hidden;
}
p:before{
 content:"";
 display:block;
 position:absolute;
 margin-top:240px;
 background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
 height:60px;
 width:300px;
}

http://jsfiddle.net/MM29r/9/

EDIT3

затухающие изображения старых браузеров (используйте ссылки реальных изображений, а не base64)

http://jsfiddle.net/MM29r/13/

Ответ 2

Один из вариантов заключается в использовании dotdotdot плагина jQuery.

Используется как

$("div.text_element").dotdotdot({
  ellipsis : "...",
  wrap : "word"
});

Таким образом, вы можете просто относиться к размерам div, а не к строкам или другим атрибутам CSS. Кроме того, он позволяет запускать события для отображения и скрытия скрытого текста.

Ответ 3

Вам следует искать методы фиксации линии

Список их можно найти здесь http://css-tricks.com/line-clampin/

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

Clamp.js [https://github.com/josephschmitt/Clamp.js]

Вот пример

var paragraph = document.getElementById("myParagraphId");

$clamp(paragraph, {clamp: 3});

Ответ 4

Вы можете определенно использовать Clamp.js, который является плагином JavaScript, созданным Джозефом Шмиттом. Минимизированную версию кода можно найти здесь.

Затем вы можете использовать его следующим образом:

var elem = document.getElementsByTagName("div");

for(var z=0;z < elem.length; z++){
  $clams(elem[z], {clamp: '300px'});
}

В качестве альтернативы вы можете использовать getElementsByClassName, если не все ваши <div> необходимые фиксации.

Ответ 5

Вот что я хотел бы сделать в этом случае:

Сначала нам нужно получить div и узнать высоту строки, поэтому я предполагаю, что вы получили свой div как объект jQuery.

var $divToClamp = $("#");
var $cloneDiv = $divToClamp.clone();
$divToClamp.insertAfter($cloneDiv.html("A"));
// created a new div as same place with the div to get same css, from parents, class etc.
// i don t know how jQuery handles the ids you must check that
var lineHeightToClamp = $cloneDiv.height() * 3;
$cloneDiv.remove();
// remove the clone we are done with it this does not work create clone div as fixed position back of the actual div and visibility hidden (not display:none)
//now we now the line-height for 3 lines set the css
$divToClamp.css({
      overflow : "hidden",
      lineHeight: lineHeightToClamp
    });

какая-то вещь, подобная этому, должна исправить вас, но могут быть некоторые исключения, такие как margin div. Я не уверен, что $cloneDiv.height() включает их или нет.

также, если в вашем div есть другой элемент (например, span) с другим css, который также изменит ситуацию.

Надеюсь, что это поможет.