Question

我是否正在尝试创建博客页面并考虑限制主要内容长度的最佳方法？（缩略图下的说明）

我是用jQuery做的，但我正在寻找开发人员常用的方法。

或者我可以在后端用php限制它。

＆＃13;

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);
    
});

＆＃13;

div.content {
  width: 300px;
  height: 300px;
}

＆＃13;

<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>

＆＃13;

感谢。

Answer 1

有几种方法可以做到这一点。如果您想在div中显示部分内容，如上所示，最好使用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;

我希望这可以让您更好地了解您的选择！

Answer 2

如果容器具有固定大小

，则可以使用CSS

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 200px;
}

<div class="ellipsis">This is a dummy text to demonstrate ellipsis.</div>

Answer 3

对于客户端解决方案，我建议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>

限制段落字符的有效方法（垂直文本溢出）

3 个答案: