logo标签列表

jQuery限制文本长度

jquerycsstextformatting
10

我能否使用jQuery在一定数量的字符后隐藏DIV中的文本？

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

欢迎任何其他解决方案。

谢谢。

您可能希望查看这里的答案：https://dev59.com/vXRB5IYBdhLWcg3wuZU1。 - Paddy
我想限制的不是物理宽度，而是字符数。 - usertest
你在下面的评论中提到，你试图限制的内容可能包含文本和HTML标签。这些标签是否标准化或者你需要一个动态解决方案？此外，每个标签中是否会有多个带文本的子标签？我认为这些都是重要因素。 - jessegavin
我认为唯一带有文本的标签将是<br/>标签。 - usertest
7个回答
21

我认为这个目的可以比上面解释的方式更容易地实现

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

上述 jQuery 代码将隐藏 div 文本，如果它超过10个字符，并在结尾处添加省略号来说明还有更多内容。

我从答案中切换到这个，因为我只需要在达到文本限制时应用它。而且这是更少的代码。感谢这个很棒的答案+1。 - Gerico
为难懂的文本添加一个 trim()。 - user1752532
在使用WordPress时有什么需要注意的吗？我尝试了这个函数来将'span'类 'rs_rs_name' 限制在45个字符以内，但它不起作用...有什么想法吗？jQuery(function(){ jQuery(".rs_rs_name").each(function(i){ len=$(this).text().length; if(len>45) { jQuery(this).text($(this).text().substr(0,45)+'...'); } }); }); - RobBenz
11

这将隐藏部分文本

<!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>
嗨，感谢回复，但它与jessegavin的代码存在相同的问题，即HTML标签未被忽略。因此，有时输出中会出现一半的标签。 - usertest
1
我无法评论jessegavin的答案，但以下是在多个div中使其工作的方法：将jQuery代码放在此内：$('.someClass').each(function(){ // Code goes here }); 并进行更改：“#myDiv”变为 - zyON
2

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

// 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()

});
2
$.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);
1

我正在用这个答案替换我的原始答案......

<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>
1
你的 len 变量有点闲置 =) - BalusC
抱歉，感谢您的回复。不幸的是，DIV文本包含HTML标签，因为我从外部API获取它。 - usertest
substr() 的第二个参数是长度而不是结束索引，所以我猜你实际上是想要 chars.substr(0, limit)。 - Lobstrosity
substr() 不关心指定的长度是否超过了字符串长度，所以为了简洁起见，你可以只写成：$("#myDiv").text($("#myDiv").text().substr(0, 15)); - Lobstrosity
太好了！但我可以问一个问题吗？我尝试将myDiv更改为类，并将其应用于多个DIV，但它不起作用。我尝试使用each函数，但似乎不起作用。您有什么想法问题可能是什么？ - usertest
显示剩余2条评论
0

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();
        }
    }
0
如果您在body标签上放置一个onkeydown事件处理程序，那么您可以计算感兴趣的div的长度，然后在完成后隐藏它并删除事件处理程序。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接