CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
High
High

Reputation: 626

Efficient way to limit the characters of paragraph (Vertical text-overflow)

I'm trying to Create Blog page and thinking about best way to limit the length of the main content? (description under thumbnails)

I'm doing this with jQuery, but I'm looking for a common way that developers do it.

or I can limit it with php in backend.

jQuery(document).ready(function ($) {
    // text limiter
    function textLimit(elements,maxTextLength) {
        for (var i = 0; i < elements.length; i++){
            if (elements[i].innerHTML.length > maxTextLength)
            elements[i].innerHTML = elements[i].innerHTML.slice(0,maxTextLength) + '...';
        }
    }
    
    textLimit($('.content').find('p'),200);
    
});
div.content {
  width: 300px;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <a><h4>New Product</h4></a>
    <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.</p>
</div>

thanks.

Upvotes: 1

Views: 751

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

For a client side solution I'd suggest Introducing Clamp.js:

$clamp(document.querySelector('.content p'), {clamp: '5'});
div.content {
    width: 300px;
    height: 300px;
}
<script src="https://rawgit.com/josephschmitt/Clamp.js/master/clamp.min.js"></script>

<div class="content">
    <a><h4>New Product</h4></a>
    <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found in the original.</p>
</div>

Upvotes: 1

Gerard
Gerard

Reputation: 15786

You can use CSS if the container has a fixed size

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 200px;
}
<div class="ellipsis">This is a dummy text to demonstrate ellipsis.</div>

Upvotes: 1

Thomas van Broekhoven
Thomas van Broekhoven

Reputation: 898

There are several ways to do it. If you would like to show part of the content in a div, as you show above, it's best to use PHP:

$string = 'Put your text here...'

// strip tags to avoid breaking any html
$string = strip_tags($string);

// Max length = 200 
if (strlen($string) > 200) {

    // truncate string
    $stringCut = substr($string, 0, 200);

    // OPTIONAL: make sure it ends in a word
    $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'...'; 
}
echo $string;

I hope this gives you a better idea of your options!

Upvotes: 2

Related Questions