Question

HTML：

<p class="comment">Lorem ipsum dolor sit amet ipsum dolor sit amet...</p>

我在本段中需要限制字符。所以，我使用了CSS：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

它的工作但有时候，评论就是这样：

<p class="comment">Lorem ipsum dolor si...</p>

但我想：

<p class="comment">Lorem ipsum dolor sit...</p>

好吧，我需要jQuery函数来实现-not char-word limit。

我该如何解决这个问题？谢谢。

Answer 1

var title = "This is your title";

var shortText = jQuery.trim(title).substring(0, 10)
    .split(" ").slice(0, -1).join(" ") + "...";

你也可以使用插件：

jQuery Expander插件
作为String

的扩展

String.prototype.trimToLength = function(m) {
  return (this.length > m) 
    ? jQuery.trim(this).substring(0, m).split(" ").slice(0, -1).join(" ") + "..."
    : this;
};

用作

"This is your title".trimToLength(10);

（来源）How Can I Truncate A String In jQuery?的更多示例，请始终尝试谷歌。

编辑2：对于您的示例，请检查 http://jsfiddle.net/aws6zs5y/1/

Answer 2

不确定你是否正在寻找这样的东西，但我会试一试......

function splitOnLastWord(text, charLimit){

  var splitText = text.split(" "),
      wordCount = 0,
      finalWord = "";

  $.each(splitText, function(i, v){

    wordCount += v.length;
    finalWord += v + ' ';

    if( wordCount > charLimit ){
      finalWord += '...';
      return false;
    }

  });

  return finalWord;
}

splitOnLastWord("Lorem ipsum dolor sit amet ipsum dolor sit amet...", 19);

Answer 3

  if(txtArea.value.length > maxChars || txtArea.scrollHeight > maxHeight)

{

试试这个如果超出行限制，我们将以三个字符为步长减少文本，因为我们不仅要删除文本的最后一个字符，还要删除换行符的两个控制字符。

Answer 4

您已经选择了答案，但对于其他寻求同一问题解决方案的人，我建议您尝试一下：

您可以在此处看到此代码：http://jsfiddle.net/akmozo/n29pprf6/

JS代码：（代码内的注释）

<script>

    function set_ellipses_by_word(txt_element, max_width){

        // if max_width is undefined, we take current text element width
        max_width = typeof max_width == 'undefined' ? $(txt_element).width() : max_width;

        // get the text element type
        var elm_type = $(txt_element)[0].nodeName;

        // init vars
        var txt = $(txt_element).text(), 
            // convert our text to an array 
            arr = txt.split(' '), 
            str = '', current_width = 0,
            // you can adjust this value according to your font and font-size ...
            max_margin = 4;

        // create a temporary element for the test, it should have the same font properties of the original element
        $('body').append('<'+elm_type+' class="txt_temp" style="display:block;float:left;"></'+elm_type+'>');

        for(var i=0; i<arr.length; i++){

            // we use str to add words everytime
            // i = 0 : str = "Lorem"
            // i = 1 : str = "Lorem ipsum"
            // i = 3 : str = "Lorem ipsum dolor sit"
            // ...
            str += (str != '' ? ' ' : '' ) + arr[i];

            // set our temporary text element text
            $('.txt_temp').text(str + '...');

            // compare our temporary text element width and our max width, It should lower than our max width
            if($('.txt_temp').width() < max_width){

                current_width = $('.txt_temp').width();

            } 

        }

        // remove temporary text element 
        $('.txt_temp').remove();

        if(current_width > 0){
            // set ou text element width
            $(txt_element).css('width', current_width + max_margin + 'px'); 

        }

    }

    // original text is : 
    // Lorem ipsum dolor sit amet ipsum dolor sit amet

    // text visible with initial css params with 180px width gives : 
    // on chrome 38 : Lorem ipsum dolor sit a...
    // on firefox 33 : Lorem ipsum dolor sit ame...
    // on internet explorer 10 : Lorem ipsum dolor sit a...

    // using set_ellipses_by_word gives : 
    // on chrome 38 : Lorem ipsum dolor sit...
    // on firefox 33 : Lorem ipsum dolor sit amet...
    // on internet explorer 10 : Lorem ipsum dolor sit...

    set_ellipses_by_word($('.comment'));

</script>

原文为：

Lorem ipsum dolor sit amet ipsum dolor sit amet

180px宽度的初始css参数给出：

on chrome 38 : Lorem ipsum dolor sit a...
on firefox 33 : Lorem ipsum dolor sit ame...
on internet explorer 10 : Lorem ipsum dolor sit a...

使用set_ellipses_by_word给出：

on chrome 38 : Lorem ipsum dolor sit...
on firefox 33 : Lorem ipsum dolor sit amet...
on internet explorer 10 : Lorem ipsum dolor sit...

Answer 5

使用此代码并享受.........：）

.comment {
	width: 10em;
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

<p class="comment">Lorem ipsum dolor sit amet ipsum dolor sit amet...</p>

通过jQuery文本字限制

5 个答案: