Javascript-форум - Обрезать тест в теге <p> но не обрезать картинку в нём

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Обрезать тест в теге <p> но не обрезать картинку в нём (https://javascript.ru/forum/jquery/69055-obrezat-test-v-tege-p-no-ne-obrezat-kartinku-v-njom.html)

Обрезать тест в теге <p> но не обрезать картинку в нём

Подскажите пожалуйста как обрезать текст в теге <p>, но не обрезать: картинку находящуюся в этом теге.

var size = 30,
    newsContent= $('.gkTabsItem.active p'),
    newsText = newsContent.text();
    
if(newsText.length > size){
	newsContent.text(newsText.slice(0, size) + ' ...');
}

<div class="gkTabsItem active">
<p>
<img src="pensioner-rabotaet-min.jpg">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</p>
</div>

ami_moor,
вариант ...

var size = 30,
        newsContent = $(".gkTabsItem.active p"),
        newsText = newsContent.text();
    if (newsText.length > size) {
        newsContent.contents().filter(function() {
            return this.nodeType == 3
        }).remove();
        newsContent.append(newsText.slice(0, size) + " ...")
    }

$(".gkTabsItem.active p").each(function(){
  var text = $(this).contents().text();
  if(text.length> 30) {
   $(this).replaceWith($(this).children("img")[0].outerHTML+text.substr(0,30)+"...");
  }
});

j0hnik,
1 строка полезна, остальные выстрел себе в ногу.

А так с какой строки стреляем?

$(".gkTabsItem.active p").each(function(){
  var text = $(this).html();
  if(text.length> 30+text.search(/>/)) {
    $(this).html(text.substr(0,30+text.search(/>/))+"...");
  }
});

в css есть фишечки, мб пригодятся.

.size {
   white-space: nowrap; /* Отменяем перенос текста */
   overflow: hidden; /* Обрезаем содержимое */
   text-overflow: ellipsis; /* Многоточие */
 }

Цитата:

Сообщение от j0hnik

А так с какой строки стреляем?

тоже самое

Цитата:

пиф паф ой ой ой

Цитата:

Сообщение от рони (Сообщение 453591)

тоже самое

А не могли бы вы вкратце, разъяснить. Буду очень признателен :yes:

j0hnik,
.replaceWith и .html уничтожат все обработчики, если такие были установлены, поиск по (/>/) тоже может дать сбой.

j0hnik,
исчез 1 блок из-за search(/>/) , исчезли алерты по картинкам.

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var size = 30,
        newsContent = $(".gkTabsItem.active p"),
        newsText = newsContent.text();
        newsContent.find("img").on("click", function() {
    alert(123);
})
/*    if (newsText.length > size) {
        newsContent.contents().filter(function() {
            return this.nodeType == 3
        }).remove();
        newsContent.append(newsText.slice(0, size) + " ...")
    }*/

$(".gkTabsItem.active p").each(function(){
  var text = $(this).html();
  if(text.length> 30+text.search(/>/)) {
    $(this).html(text.substr(0,30+text.search(/>/))+"...");
  }
});




});
  </script>
</head>

<body>
<div class="gkTabsItem active">
 <p><img alt="&gt;" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"  >Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
 </p>
 </div>
<div class="gkTabsItem active">
 <p><img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"  >это второй блок, а где первый? Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
 </p>
 </div>
</body>
</html>