4

有一些文本由 165 个字符组成。我只需要显示前 155 个字符，但 155 个字符中的最后 5 个应替换为“.....”（省略号），其余字符应删除。小提琴

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

5 回答 5

13

在这里查看substring 函数，瞧：

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

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

于 2013-05-30T15:51:14.353 回答
5

根据您所针对的浏览器，您可以只使用 css。

text-overflow: ellipsis
于 2013-05-30T15:48:42.043 回答
2

看起来 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

于 2013-05-30T16:00:54.790 回答
1

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

 $(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));
     }
 }

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

于 2017-05-08T20:38:05.810 回答
0 
$(".btn-custom").text(function(index, currentText) {
    if(currentText.length > 60){
        return currentText.substr(0, 20)+" ...";
    }
});
于 2021-03-04T10:49:57.913 回答