用省略号截断文本但保留最后一个单词

Question

我的用例：我想显示一个文本，将它的最大行数限制为两行，只有当它不适合两行时才用省略号截断它，但我想保留最后一个字。我必须在页面中使用多个段落来执行此操作。

例如：

Lorem asa ipsum dolor sat amet, consectetur adipiscing elit。 Aliquam consectetur venenatis blandit。 Praesent vehicula, libero non pretium v​​ulputate, lacus arcu facilis lectus, sed feugiat te... volutpat.

我想到的算法：

<div class="outter">
        <div class="message" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.">
            <div class="firstLine"></div>
            <div class="secondLine" style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"></div><div class="lastWord"></div>
        </div>
     </div>

1. 使用 obj.offsetWidth;
获取 outter div 长度（以像素为单位）
2. 从 message div 中获取消息。
3. 求字符串的长度，乘以大约 8（一个字母大约为 5 到 8 个像素）并与 outer 元素宽度进行比较。
4. 如果字符串的长度大于 outter div 长度的两倍，则溢出字符串（这很棘手，因为我们想根据空间拆分），将前半部分放入firstLine div 和 secondLine div 中的后半部分以及 lastWord div 中的最后一个词。 （这部分无法完美运行，因为我们不知道字符串的确切像素长度）*
5. 但如果字符串长度略小于 outter div 长度的两倍，那么演示将看起来很难看，因为后半部分 + lastWord 可以适合 secondLine div 或需要两个 div secondLine 和 lastWord div

如果有其他方法，请指点我。

Answer 1

使用 .length 获取字符串的长度和该长度的子字符串并在那里放置一个省略号。

检查它是否有效。 谢谢！