Question

有一些文字由165个字符组成。我只需显示前155个字符，但155个字符中的最后5个字符应替换为“.....”（elipses），其余字符应删除。 fiddle

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        var txt= $('div').text();
        for(i=0;i<2;i++){
            alert(txt.charAt(150+ i))
        }
    })
</script>
</head>
<body>
<div style="width:100px">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that
</div>
</body>

Answer 1

查看substring function here和voilà：

var txt= $('#restrict').text();
if(txt.length > 155)
    $('#result').text(txt.substring(0,150) + '.....');

http://jsfiddle.net/techunter/GRmY2/

Answer 2

根据您定位的浏览器，您可以使用css。

text-overflow: ellipsis

Answer 3

看起来TecHunter已经发布了几乎相同的东西，但我很无聊并且做到了这一点。

155个字符用“....”替换最后5个字符。带有字符计数器的textarea输入，在您键入时会更新。

<强> HTML

<div>
    <h2>Input</h2>
    <textarea id="sampleInput">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.     The point of using Lorem Ipsum is that
    </textarea>
</div>
<div>
    <label>Character Count:</label> <span id ="charCounter"></span>
<div>
<h2>Output</h2>
<p style="width:100px" id="sampleOutput"></p>

<强> JS

updateOutput();

$('#sampleInput').keyup(function(e){
   updateOutput();
});

function updateOutput(){
    var sampleInput = $('#sampleInput').val(),
        sampleInputLength = sampleInput.length;

    if(sampleInputLength >= 155) {    
        sampleInput = sampleInput.substr(0,150) + ".....";    
    }

    $('#charCounter').text(sampleInputLength);
    $('#sampleOutput').text(sampleInput);
}

<强> CSS

#sampleInput {
    width: 400px;
    height:100px;    
}

<强> jsfiddle

Answer 4

顺便说一句，我看到了一些不错的答案，其中一些在其他情况下效率不高，例如：复制和粘贴时。所以，我建议：

 $(document).on('keyup keypress blur change', '#elementId', function () {
     var maxLength = 100; // number of characters to limit
     imposeMaxLength($(this), maxLength);
 });

 function imposeMaxLength(element, maxLength) {
     if (element.val().length > maxLength) {
         element.val(element.val().substring(0, maxLength));
     }
 }

使用imposeMaxLength作为函数，您可以在其他事件中重复使用它。

Answer 5

$(".btn-custom").text(function(index, currentText) {
    if(currentText.length > 60){
        return currentText.substr(0, 20)+" ...";
    }
});

使用jquery设置文本限制

5 个答案: