Question

我可以使用jQuery在多个字符后隐藏DIV中的文本吗？

到目前为止，我认为它会像这样 - jQuery会遍历文本直到达到一定数量的字符。然后它会将DIV从该位置包装到文本的末尾，然后可以使用hide（）方法隐藏它。我不确定如何插入包装文本。

任何其他方式也将受到赞赏。

感谢。

Answer 1

我认为目的可以比上面解释的更容易解决

$(function(){
  $(".title").each(function(i){
    len=$(this).text().length;
    if(len>10)
    {
      $(this).text($(this).text().substr(0,10)+'...');
    }
  });       
});

上面的jquery代码会隐藏div文本（如果超过10个字符）以及广告......最后会解释还有更多内容。

Answer 2

这将隐藏文本的一部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <style type="text/css" media="screen">
        .hide{
            display: none;
        }
    </style>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            var $elem = $('p');         // The element or elements with the text to hide
            var $limit = 10;        // The number of characters to show
            var $str = $elem.html();    // Getting the text
            var $strtemp = $str.substr(0,$limit);   // Get the visible part of the string
            $str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span>';  // Recompose the string with the span tag wrapped around the hidden part of it
            $elem.html($str);       // Write the string to the DOM 
        })
    </script>

</head>
<body>
<p>Some lenghty string goes here</p>
</body>
</html>

Answer 3

杰夫我有同样的问题想要将文本限制器添加到动态内容中，所以这是我的解决方案：

// TEXT CHARACTER LIMITER 

$(document).ready(function() {

  $.fn.textlimit = function()
  { 

    return this.each(function()                       
    {

    var $elem = $(this);            // Adding this allows u to apply this anywhere
    var $limit = 22;                // The number of characters to show
    var $str = $elem.html();        // Getting the text
    var $strtemp = $str.substr(0,$limit);   // Get the visible part of the string
    $str = $strtemp + '<span class="hide">' + $str.substr($limit,$str.length) + '</span> ...';  
    $elem.html($str);
    })

  };

});

// Call the text limiter above 

$(document).ready(function() {

    $('.someGenericClass .anotherClass').textlimit()

});

Answer 4

我用这个替换原来的答案......

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        var limit = 20;
        var chars = $("#myDiv").text(); 
        if (chars.length > limit) {
            var visiblePart = $("<span> "+ chars.substr(0, limit-1) +"</span>");
            var dots = $("<span class='dots'>... </span>");
            var hiddenPart = $("<span class='more'>"+ chars.substr(limit-1) +"</span>");
            var readMore = $("<span class='read-more'>Read More</span>");
            readMore.click(function() {
                $(this).prev().remove(); // remove dots
                $(this).next().show();
                $(this).remove(); // remove 'read more'
            });

            $("#myDiv").empty()
                .append(visiblePart)
                .append(dots)
                .append(readMore)
                .append(hiddenPart);
        }
    });
</script>
<style type="text/css">
    span.read-more { cursor: pointer; color: red; }
    span.more { display: none;  }
</style>
</head>
<body>
    <div id="myDiv">Here are all<br/> my characters.<br/> I would like to limit them to 20.</div>
</body>
</html>

Answer 5

$.fn.textlimit = function(limit)
{
    return this.each(function(index,val)                       
    {
        var $elem = $(this);
        var $limit = limit;
        var $strLngth = $(val).text().length;  // Getting the text
        if($strLngth > $limit)
        {
          $($elem).text($($elem).text().substr( 0, $limit )+ "...");
        }
    })
};

**how to use**

$("#DivId").textlimit(60);

Answer 6

如果你在body标签上放了一个onkeydown事件处理程序，你可以计算感兴趣的div中的长度，然后你可以在完成时隐藏它，并删除你的事件处理程序。

Answer 7

HTML：

25 是最大长度。

<input type="text" name="Occupation"  id="Occupation" value="" placeholder=""
onkeypress="limitKeypress(event,this.value, 25)" class="form-control" required>

Javascript：

function limitKeypress(event, value, maxLength) {
        if (value !== undefined && value.toString().length >= maxLength) {
            event.preventDefault();
        }
    }

jquery按长度限制文本

7 个答案: