Javascript:Add"；阅读更多……”；在某个词之后

目前一直在处理这个问题。我有一个巨大的文本，并希望显示一个“预览”它与“阅读更多”按钮下面。单击该按钮时，预览将消失，并被其余文本替换。这是工作说明顺便说一句

目前，我正在基于角色进行此操作：

<script type="text/javascript">
$(function(){
    var maxLength = 1507;
    var myStr = $(this).html();
    $(".jobdescription").each(function(){
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html("");
            $(this).append('<span class="broiler-text">' + newStr+ '</span>');
            $(this).append(' <a href="javascript:void(0);" class="read-more">Read full Job Description</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
       $(".broiler-text").remove();
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style>
    .jobdescription .more-text {
        display: none!important;
    }
</style>

$（函数（）{
var maxLength=1507；
var myStr=$（this.html（）；
$（“.jobdescription”）.each（函数（）{
如果（$.trim（myStr）.length>maxLength）{
var newStr=myStr.substring（0，maxLength）；
var removedStr=myStr.substring（maxLength，$.trim（myStr.length））；
$（this.empty（）.html（“”）；
$（this.append（“”+newStr+“”）；
$（此）。附加（“”）；
$（this.append（“”+removedStr+“”）；
}
});
$（“.read more”）。单击（函数（）{
$（“.bounder text”）.remove（）；
$（this.sides（“.more text”）.contents（）.unwrap（）；
$（this.remove（）；
});
});
.jobdescription.更多文本{
显示：无！重要；
}

但这将不允许使用任何字符不一致（无法转到.text，因为它会破坏格式化）。因此，我想在某个词之后剪掉（比如说“甲壳虫汁”）。可悲的是，我对JS完全陌生，在意识到我在这个特定用例中的错误之前，我非常自豪地将这个脚本拼接在一起

---

有什么想法吗？

你可以尝试用css定义它的宽度和宽度

溢出：隐藏； 文本溢出：省略号

我给你留个片段

.truncate{
显示：内联块；
宽度：250px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.截断+a{
显示：内联块；
垂直对齐：顶部；
页边顶部：-1px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比非因特杜姆马萨。在viverra varius中添加一种调味品。这是一个很好的例子。在faucibus中，Interdum和malesuada在第一次同侧前就出名了

您可以尝试使用css定义其宽度和宽度

溢出：隐藏； 文本溢出：省略号

我给你留个片段

.truncate{
显示：内联块；
宽度：250px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.截断+a{
显示：内联块；
垂直对齐：顶部；
页边顶部：-1px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫比非因特杜姆马萨。在viverra varius中添加一种调味品。这是一个很好的例子。在faucibus中，Interdum和malesuada在第一次同侧前就出名了

对未来来说是个好主意，但对于长度不等的“预览”职位描述来说，这是行不通的。因此，为什么我需要它削减后，一定的关键字将始终保持不变。最好的方法是，将关键字本身完全剪切。编辑：这个.jobdescription元素也是由另一个软件提供的。我不能直接影响它。整件事都在一个类似wordpress的构建器中，它只允许我使用css和javascript进行调整。这对未来来说是个好主意，但对于具有不同长度的“预览”的工作描述来说是行不通的。因此，为什么我需要它削减后，一定的关键字将始终保持不变。最好的方法是，将关键字本身完全剪切。编辑：这个.jobdescription元素也是由另一个软件提供的。我不能直接影响它。整个东西都放在一个类似wordpress的构建器中，它只允许我使用css和javascript进行调整。

.truncate {
      display: inline-block;
      width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .truncate + a {
    display: inline-block;
      vertical-align: top;
      margin-top: -1px;
    }