jquery - 带有 jquery succint 的 html 或 css

Question

根据 stackoverflow 上某人的建议，我使用 jquery succint https://github.com/micjamking/Succinct截断了我在 php 网站上的帖子。

它工作得很好但是，我遇到了一个小问题（对我来说）......我将省略号更改为自定义文本，说“阅读更多”这样

<script>
    $(function(){
        $('.mypost a').succinct({
            omission: '...Read More'
        });
    });
</script>

那将是完美的，但我想用 span 标签包装 succint 在截断文本上添加的“阅读更多”。

目前，如果我将它包装在一个跨度中，它会将整个跨度 html 呈现为文本。我试图实现的简单效果是使“阅读更多”文本与它正在截断的“.mypost a”文本颜色不同。

如果我可以将它包装在一个跨度中，我可以将 css .mypost 添加一个跨度 {color:#f00;}

并得到想要的结果。

有没有人建议让这成为可能？

score 0 · Accepted Answer

查看jQuery.succinct.js 的第 46 行，很明显它正在使用jQuery.text()替换被截断元素的文本，因此任何文本在替换时都会被 HTML 编码。如果你想继续使用这个库，你可以分叉它并修改它以接受 HTML 作为替换文本，或者找到另一个库。

score 0 · Accepted Answer

根据该站点的 README.md，您似乎可以将其更改omission为所需的 HTML：omission: '...<span class="mypost">Read More</span>'

或者，您可以只使用 CSS 来执行此操作：

.mypost {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

2 回答 2