CODEWITHSUNDEEP
javascriptjquery
Matoeil
Matoeil

Reputation: 7289

trim text of div but keeping the markers

I would like to limit to 10 characters but keep the style.

var body=$(".views-field-body");
body.replaceWith(body.text().substring(0, 10));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="views-field views-field-body"><div class="field-content"><p><strong>Sed quid est quod</strong> in hac causa maxime homines admirentur et reprehendant</p>
<p>meum consilium</p></div></div>

Upvotes: 2

Views: 75

Answers (2)

Code_Ninja
Code_Ninja

Reputation: 1867

Use the following code instead:

var body = $(".views-field-body");
body.text(body.text().substring(0, 10));
.views-field-body {
  color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="views-field-body">
  THis is a very long text.
</div>

It works in the same way as your code does, but here I am replacing the text only.

In the function used by you earlier, the element was getting replaced.

Hope this was helpful.

Upvotes: 1

Marco
Marco

Reputation: 198

You can parse all the elements, get the text length and check either it's other your maximum length. In this case, you truncate it, and all other elements are empty : See on CodePen

HTML :

$(function() {
    var textLength = 0;
    var maxLength = 52;
    $('*:not(style, script)').each(function(i, element) {
        if (textLength < maxLength) {
            if ($(element).children().length > 0)
                return;
            else {
                let localLength = $(element).text().length;
                textLength += localLength;
              console.log(textLength);
                if (textLength > maxLength) {
                   $(element).text($(element).text().substring(0, (textLength + maxLength) - $(element).text().length));
                }
            }
        } else {
            $(element).text('');
        }
    });
});
.last-one {
  border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
  <head>
    <title>My limited page</title>
  </head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque velit, rutrum id arcu eget, faucibus interdum odio. Aenean viverra semper lacus, vel convallis ex accumsan non. Fusce sapien ligula, porta eleifend egestas a, lobortis ac augue. Vivamus sed nisi non dolor tincidunt feugiat vel ac sem. Nam tristique urna ut tortor ultricies pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ac diam in est dictum egestas id nec quam. Cras sed blandit libero. Maecenas maximus arcu quis orci maximus pulvinar. Sed vulputate leo nec nibh consequat vestibulum. Donec finibus sed risus quis interdum. Aliquam scelerisque sed lectus at tempus. Sed tristique pulvinar magna, ut pellentesque justo tempor in.

Integer risus arcu, rhoncus sed elementum vel, auctor sed est. Curabitur quis commodo velit. Donec blandit, ipsum eget ornare ornare, ex magna mollis augue, sit amet fringilla magna nulla ac libero. Fusce at mauris ut orci lobortis aliquam. In magna ligula, sagittis ut aliquam quis, tristique et augue. Nunc in tellus porta, fermentum ante quis, molestie nisl. Curabitur at ex sapien. Aliquam ac lacinia diam. Sed in dui ac arcu euismod viverra et sit amet nulla. Morbi urna turpis, accumsan non dolor sit amet, lobortis mattis diam. Pellentesque metus tortor, consequat cursus magna id, vulputate luctus nulla. Vivamus faucibus a justo id tincidunt.

Nulla vitae tortor finibus, aliquet sem vel, fermentum magna. Maecenas sit amet libero sed libero pellentesque ultricies. Nullam quam massa, maximus sed elit eu, pulvinar ultrices libero. Curabitur sit amet vestibulum libero, id blandit nulla. Nunc consectetur mollis congue. Aliquam id pulvinar nisi. Aenean cursus pulvinar leo, non viverra ipsum lobortis vitae. Mauris ac dictum libero, eu fermentum quam. Nam felis erat, congue quis elementum rutrum, ultricies quis lacus. Nunc nec risus sit amet justo malesuada elementum. Aliquam ac enim vestibulum, mollis leo a, tincidunt orci. Aliquam convallis, mi quis tincidunt euismod, nisl urna vulputate magna, ut suscipit magna urna aliquet est. Aliquam dui orci, dapibus sit amet feugiat a, aliquam sit amet orci.

Sed vestibulum nulla et vulputate ornare. Donec risus turpis, mattis vitae metus quis, dignissim egestas ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas egestas tempor tortor, sed tincidunt tortor pulvinar quis. Nulla et feugiat odio. Maecenas faucibus eros vitae dictum hendrerit.

Nullam aliquam, ante a tempus suscipit, dui eros eleifend augue, sit amet rutrum enim nisi at lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vel turpis quam. Cras aliquam sem neque, sed pharetra risus vestibulum eget. Phasellus posuere dapibus nulla non laoreet. Praesent iaculis ultrices pharetra. Nullam aliquet suscipit iaculis. Nam sed libero in turpis facilisis vehicula. Donec viverra nisl nec mauris pharetra ullamcorper. Pellentesque pellentesque sit amet lacus at laoreet. Curabitur ultrices a mauris viverra laoreet.</p>
  <p class="last-one"> The end? </p>
  </body>
</html>

(The last class is here, just so that you see that HTML tags are not touched)

Upvotes: 2

Related Questions