Форум

ami_moor · #1 (**permalink**) 27.05.2017, 00:22

Подскажите пожалуйста как обрезать текст в теге <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>

рони · #2 (**permalink**) 27.05.2017, 00:51

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) + " ...")
    }

j0hnik · #3 (**permalink**) 27.05.2017, 05:57

$(".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)+"...");
  }
});

рони · #4 (**permalink**) 27.05.2017, 09:56

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

j0hnik · #5 (**permalink**) 27.05.2017, 14:04

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

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

j0hnik · #6 (**permalink**) 27.05.2017, 14:06

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

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

рони · #7 (**permalink**) 27.05.2017, 14:44

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

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

тоже самое

Цитата:

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

j0hnik · #8 (**permalink**) 27.05.2017, 15:46

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

тоже самое

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

рони · #9 (**permalink**) 27.05.2017, 15:58

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

рони · #10 (**permalink**) 27.05.2017, 16:09

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>

Форум

Справочник

Discord чат

Курсы javascript