jQuery实现‘查看更多’功能时避免单词截断的问题求助

我来帮你搞定这个截断单词的问题！你遇到的核心问题是原代码直接按固定字符数硬截断，完全没考虑单词边界，导致把完整的单词劈成了两半。咱们只需要调整截断逻辑，让文本在指定字符数附近的最后一个空格处截断，就能保证单词的完整性了。

修改后的完整代码 #

JavaScript 部分

$(document).ready(function() {
    var showChar = 45;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";

    $('.cut').each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            // 找到showChar位置前的最后一个空格，确保截断在完整单词末尾
            var truncateIndex = content.lastIndexOf(' ', showChar);
            // 容错处理：如果找不到空格（比如开头就是超长单词），就用原字符数截断
            truncateIndex = truncateIndex === -1 ? showChar : truncateIndex;
            
            var c = content.substr(0, truncateIndex);
            var h = content.substr(truncateIndex, content.length - truncateIndex);
            
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
            $(this).html(html);
        }
    });

    $(" .morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

CSS 部分

a { color: #0254EB }
a:visited { color: #0254EB }
a.morelink { text-decoration:none; outline: none; }
.morecontent span { display: none; }
.comment { width: 400px; background-color: #f0f0f0; margin: 10px; }

HTML 部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comment cut">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment cut">
 Duis nisl nibh, egestas at fermentum at, viverra et purus.
</div>
<div class="comment cut">
 consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit. Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum. Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

关键修改点说明 #

1. 新增单词边界判断：用lastIndexOf(' ', showChar)定位到指定字符数前的最后一个空格，让截断点落在完整单词的末尾，避免劈开单词。
2. 容错处理：如果文本开头就是超长单词（在指定字符数内找不到空格），就 fallback 到原有的固定字符数截断，避免出现异常情况。

这样修改后，你的“查看更多”功能就会在完整单词后截断文本，完全符合你期望的效果啦！

内容的提问来源于stack exchange，提问作者kibus90