Question

您好我有以下<h2>“示例示例示例”。我想检测此<h2>的长度，如果它超过10个字符，则将其缩小为“示例ex ...”。得到它？将其缩小为10个字符，并在末尾添加“...”。

这是我的代码：

HTML

<h2>Example example example example example</h2>
<h2>Example</h2>

JQUERY

$(document).ready(function(){
    var dtl = $('.h2').text().length;

        if(dtl>10){
        $('.h2').text().length = 10;
        $('.h2').text($('.h2').text()+"...");
    } 
});

但那不起作用......

Answer 1

在这种情况下你需要使用substr：

您有h2个标记元素，而不是.h2类名。

$(document).ready(function(){
    var dtl = $("h2").text().length;

     if(dtl>10){
        $('h2').text($('h2').text().substr(0,10)+"...");
    } 
});

我只为一个元素做，你可能需要使用$("h2").each()来定位所有元素。

更完整的代码：

 $(document).ready(function(){

         $("h2").each(function() {
             if($(this).text().length > 10) {
               $(this).text($(this).text().substr(0,10)+"...");
             }
         });
    });

<强>样本

＆＃13;

 $(document).ready(function(){

     $("h2").each(function() {
         if($(this).text().length > 10) {
           $(this).text($(this).text().substr(0,10)+"...");
         }
     });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<h2>Example example example example example</h2>
<h2>Example</h2>
</body>
</html>

＆＃13;

Answer 2

您必须使用两个<h2>代码

$("h2").each(function() {
   var dtl = $(this).text().length;
   //rest of your code goes here
   if(dtl>10){
      var res = $(this).text();
      res = res.substring(0, 4); //apply your logic here what ever you want pass (0, 10)
     $(this).text(res +"...");
   } 
});

Answer 3

试试这段代码，它可能有效

<h2>This tag contains more than 10 characters</h2>

Jquery的：

$(document).ready(function () {
        var len = $("h2").text().length;
        var text = $("h2").text();

        if (len > 10) {
            var stext = text.substring(0, 10);
            $("h2").text(stext).append("...");
        }

    });

如果长度超过10个字符，请收缩文本

3 个答案: