Javascript 将跨度中的内容替换为“…”&引用；70%的家长'；s宽度

更新：实际问题：为什么“（ciclo）”的行数比其他行低一点

---

例如：

我有这样的结构：

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

限制内容（ciclo）

我想要的是，如果

limitCharacters

span内容占据了其父级div宽度的70%以上，jQuery必须删除span的其余部分，并用“…”替换它。因此，它在一行中显示span的剩余内容，加上“…”，再加上紧随其后的另一个内联span

limitCharacters

class span（在上面的代码中为“（ciclo）”）

我解决了这个基于其父级的宽度计算问题（正确计算），如果结果是70或更多，它会将跨度的宽度调整为60%。问题是我必须避免任何换行，这只能通过

空白：nowrap

css方法来实现，结果是60%不适用

我真正需要的是：

我实际拥有的是以下内容（参见JSFIDLE）：

如果我避免使用nowrap方法，它就会断线

如果我使用overflow:hidden，它会去掉“…”并将第二个（“ciclo”）放在较低的行高度，因为我不知道某些原因（参见示例）：

---

所以你可以使用一些css

.limitCharacters {
  width: 70%;   // Or you can put some fixed pixel value for 70%
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

我不确定span的效果如何，但div会很好。检查这把小提琴：

更新答案：

关于你问题的更新部分。 这是因为“ciclo”不在div中，在一个span中。如果你想让它在同一行，把

<span>(ciclo)</span>

（ciclo）

进入div标记，如：

---

如果您想将它放在新行中，请将它放在一个新的div中，如：

您还可以使用

文本溢出：省略号
您不需要使用jQuery执行此操作。（震惊？）。纯CSS就足够了

看看这个例子。我添加了背景色，以使这一点非常明显的元素是什么

现场演示示例

CSS
溢出：隐藏将删除“（Ciclo）”后面的文本。它删除“…”并将（Ciclo）设置在另一个高度。我已经用这个更新了问题。所以，你希望整体效果是这样的吗？（仅CSS）：是的，Matt，但是为什么（ciclo）的线比其他的线低呢？你这样做的话，你会在前进的过程中面临更多的问题。。。就像你希望你的话被完全隐藏或者被完全展示。。。它可能看起来像这样-Fotografia数字y传输。。。你会希望它显示Fotografia Digital y…所以为了更好地控制，我建议删除句子末尾的单词，并再次测量宽度。如果仍然很大，请再删除一个单词…然后删除一个。很抱歉，我发布了错误的JSFIDLE链接。我需要它在同一行，作为图像附加之前。我怎么做这个？它总是中断（ciclo）这里有一个例子：不管剩下多少空间，（ciclo）永远不会上升到同一行请看：我需要（ciclo）在跨度之后。在您的示例中，（ciclo）比文本的其余部分略低。如果它不这样做，那就太好了。为什么会这样？请查看我问题开头的更新信息。谢谢你，谢谢你，约书亚。我将用其他方法解决这个问题，因为似乎不可能像我希望的那样去做。可能将“（ciclo）”跨度定位在行的开头。请参阅我问题开头的更新信息。非常感谢。
.tableContent {
    width: 250px;
    background: red;
}

.contentColumn40{
    height: 36px;
    width: 70%;

    border:1px solid #e0e0e0;
    display: inline-block;
    overflow: hidden;
    background: yellow;
}

.limitCharacters {
    display: block;
    white-space: nowrap;
    width: 100%;                   
    overflow: hidden;  
    text-overflow:    ellipsis;
}