Обрезать лишний текст в параграфе, внутри блока

#html #css #вёрстка

Всем привет! Столкнулся с такой задачей: нужно, чтобы внутри блока была картинка
и текст в параграфе, если текста слишком много, он должен быть обрезан (символов "..."
вполне хватит).

Пробую text-overflow: ellipsis но безрезультатно, подскажите, пожалуйста, как заставить
это работать.

Вот пример кода:




    	

    		Test test test test test test test test test test test test test test test
test test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    	
    



    

Ответы

Ответ 1

Можно при помощи jquery, но можно и на css.


$("p").text(function(i, text) {

  if (text.length >= 50) {
    text = text.substring(0, 50);
    var lastIndex = text.lastIndexOf(" ");       // позиция последнего пробела
    text = text.substring(0, lastIndex) + '...'; // обрезаем до последнего слова
  }
  
  $(this).text(text);
  
});


    

        Test test test test test test test test test test test test test test test
test test test test test test test test
         test test test test test test test test test test test test test test test
test test test test test test test
         test test test test test test test test test test test test test test test
test test test test test test test
         test test test test test test test test test test test test test test test
test test test test test test test
         test test test test test test test test test test test test test test test
test test test test test test test
    





Без количества символов:



(function($) {
        var truncate = function(el) {
            var text = el.text(),
                height = el.height(),
                clone = el.clone();

    	  clone.css({
                position: 'absolute',
                visibility: 'hidden',
                height: 'auto'
            });
            el.after(clone);

            var l = text.length - 1;
            for (; l >= 0 && clone.height() > height; --l) {
                clone.text(text.substring(0, l) + '...');
            }

            el.text(clone.text());
            clone.remove();
        };

        $.fn.truncateText = function() {
            return this.each(function () {
                truncate($(this));
            });
        };
        
         $('div').truncateText();
    }(jQuery));

    

      

        Test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test
        test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test test
        test test test test test test test test test test
      
    


Ответ 2

Если Вем принципально решение на чистом CSS-е обратите внимание на решение из статьи.


Ответ 3

Надо использовать overflow: hidden.



.d1 {
 overflow: hidden;
 height: 50px;
}

много много текста много много текста много много текста много много текста много
много текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста много много текста много много текста много много текста много много текста
много много текста много много текста много много текста много много текста много много
текста 



Ответ 4

Как пример если на CSS и если свойство  text-overflow: ellipsis;  - не ставит точки
можно вот так:



 
div{
   margin: 50px; 
   width: 100px; 
   height: 300px; 
   border: 2px solid black;  
   overflow: hidden;
    /*-o-text-overflow: ellipsis;*/
    /*text-overflow: ellipsis;*/
    position: relative; 
 }
 div:after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0; 
  padding: 0 5px;
}

   

    	Test test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test
    		 test test test test test test test test test test test test test test test
test test test test test test test