javascript - 使用 css 在 chop 部分 chop 带有链接( 标记)的多行文本

Question

我有一个 div，它会动态填充一些可能包含或不包含链接的文本。

例如:

<div>Welcome to Stackoverflow.
     Someone will provide an answer to this question.
     Just sit back and relax, or go check your
     <a href="http://gmail.com">mail</a>
</div>

当我使用提供的解决方案 chop 它时 here ，我得到的输出是:

Welcome to Stackoverflow. Someone will
provide an answer to this... mail

发生这种情况的原因是 anchor (a) 标记是内联元素，而“省略号”属性仅适用于 block 元素。说明here .

我可以分配最后一个子 A 标签显示: block ，但如果它不是 chop 文本的一部分，那么它后面的文本将换行。

有趣的是，如果我简单地添加一个“.” (句点)甚至链接后末尾的不间断空格，则正常 chop 并且链接不会在省略号后跳入。

有没有更简洁的方法？

补充一下:我正在寻找不需要跨浏览器但适用于 Chrome 的解决方案，因为我正在为 CEF 编码。

Answer 1

将“display:inline-block”分配给最后一个 child A，而不是“display:block”;-)

更新:

我阅读了您链接的线程中提出的 js 解决方案，并将 jsFiddle 更新为 this one .是您想要的行为吗？

HTML:

<div style="width:200px; height:80px; border:1px solid red">Welcome to Stackoverflow.
     Someone will provide an answer to this question.
     Just sit back and relax, or go check your
     <a href="http://gmail.com">mail</a>
</div>

JS:

$(document).ready(function(){
  $("div").ellipsis();
});