用＆＃34; ...＆＃34;替换Span的内容在父母宽度的70％之后

Question

更新：实际问题：为什么“（ciclo）”会比其他线路略低一些？ ：http://jsfiddle.net/MV8q5/2/

---

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

我有这个结构：

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

我想要的是，如果limitCharacters span内容占据其父div宽度的70％以上，jQuery必须删除其余的跨度，用“......”替换它。因此，它在一行中显示了跨度的剩余内容，加上“...”，加上另一个内联跨度，紧跟在此limitCharacters类Span之后（在上面的代码中，“（ciclo）” ）。

我根据它的父级（正确计算）解决了这个计算limitCharacters的％宽度，如果此结果为70或更多，则将span的宽度调整为60％。问题是我必须避免任何换行，这只能通过white-space: nowrap css方法完成，结果是60％不适用。

我真正需要的是：

我实际拥有的是这个（见jsfiddle）：

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

如果我使用溢出：隐藏，则取出“...”并将第二个（“ciclo”）放在较低的行高中以获取一些我不知道的原因（参见示例）：http://jsfiddle.net/vAhCS/

Answer 1

所以你可以使用一些css

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

我不确定跨度的效果如何，但div会很好用。检查这个小提琴：http://jsfiddle.net/MV8q5/

更新回答：

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

<span>(ciclo)</span>

进入div标签，例如：http://jsfiddle.net/MV8q5/3/

如果您想要一个新行，请将其放在一个新的div中：http://jsfiddle.net/MV8q5/4/

Answer 2

你也可以使用text-overflow: ellipsis; c.f css tricks

Answer 3

您不需要使用jQuery执行此操作。 （休克？）。纯CSS就足够了。

看看这个例子。我添加了背景颜色，以确定哪些元素是哪个。

现场演示示例

http://jsfiddle.net/vAhCS/2/

CSS

.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;
}