ограничение на jQuery текст по длине

могу ли я Скрыть текст в DIV после нескольких символов с помощью jQuery?

до сих пор я думаю, что это будет что - то вроде этого-jQuery будет цикл через текст, пока он не достигнет определенного количества символов. Затем он обернет DIV из этой позиции в конец текста, который затем может быть скрыт с помощью метода hide (). Я не уверен, как вставить этот текст.

любой другой способ обойти это также будет оценен.

спасибо.

10
css formatting jquery text

6 ответов

это скроет часть текста 

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

Я думаю, что цель может быть решена гораздо проще, чем объясняется выше

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

приведенный выше код jquery скроет текст div, если он превышает 10 символов, а также объявления ... в конце объяснить, что есть нечто большее.

21

Джефф у меня была та же проблема, что и добавить ограничитель текста в динамический контент, поэтому вот мое решение:

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

я заменяю свой первоначальный ответ на этот.....

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

Если вы поместите обработчик событий onkeydown в тег body, вы можете подсчитать длину в интересующем div, а затем скрыть ее, когда закончите, и удалить обработчик событий.

0