javascript - 在父级宽度的 70% 之后将 Span 中的内容替换为 "..."

Question

更新:实际问题:为什么“(ciclo)”会比其他行低一点？ : http://jsfiddle.net/MV8q5/2/

---

示例:http://jsfiddle.net/vAhCS/

我有这样的结构:

<div>
<span class="limitCharacters">CONTENT TO LIMIT</span><span>(ciclo)</span>
</div>

我想要的是，如果 limitCharacters 跨度内容占据其父级 div 宽度的 70% 以上，jQuery 必须删除跨度的其余部分，将其替换为“...”。因此它在一行中显示跨度的剩余内容，加上“...”，再加上紧跟在这个 limitCharacters 类 Span 之后的另一个内联跨度(在上面的代码中，“( ciclo)").

我解决了这个基于它的父级计算 limitCharacters 的 % 宽度(计算正确)，如果这个结果是 70 或更多，它将跨度的宽度调整为 60%。问题是我必须避免任何换行符，这只能通过 white-space: nowrap css 方法来完成，结果是 60% 不适用。

我真正需要的是:

我实际拥有的是这个(参见 jsfiddle):

如果我避免使用 nowrap 方法，它会断行。

如果我使用 overflow:hidden，它会去掉“...”并将第二个(“ciclo”)放在较低的行高中，原因我不知道(参见示例):http://jsfiddle.net/vAhCS/

Answer 1

您还可以使用 text-overflow: ellipsis; c.f css tricks