关于javascript：在父级宽度的70％之后用“…”替换Span的内容

Replace content from a Span by “…” after 70% of parent's width

更新：实际问题：为什么"(ciclo)"的行比其余行低一点？：http://jsfiddle.net/mv8q5/2/

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

我有这样的结构：

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

我想要的是，如果limitCharacters跨度内容占据了父级DIV宽度的70%以上，jquery必须删除跨度的其余部分，并将其替换为"…"。因此，它在一行中显示了跨度的剩余内容，加上"…"，再加上另一个正好位于该limitCharacters类跨度之后的内联跨度(在上面的代码中，"(ciclo)")。

我根据它的父级解决了这个计算限制字符的宽度(正确计算)，如果这个结果是70或更多，它会将跨度的宽度调整为60%。问题是我必须避免任何换行，这只能由white-space: nowrapcss方法完成，结果60%不适用。

我真正需要的是：

I need this 。

我实际拥有的是这个(见jspiddle)：

氧化镁

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

如果我使用overflow:hidden，它会去掉"…"并将第二个("ciclo")放在一个较低的行高中，对于一些我不知道的reaon(参见示例)：http://jsfiddle.net/vahcs/

氧化镁

相关讨论

您不需要使用jquery来完成这项工作。(震惊？).pure css就足够了。

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

现场演示示例

http://jsfiddle.net/vahcs/2/

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

enter image description here 。

相关讨论

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

相关讨论

所以你可以用一些CSS

1
2
3
4
5
6

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

我不确定跨度能有多大的作用，但是分区能有多大的作用。检查这个小提琴：http://jsfiddle.net/mv8q5/

更新的答案：

对于问题的更新部分。这是因为"ciclo"在一个范围之外。如果你想把它放在同一行，把

1	<span>(ciclo)</span>

号

进入DIV标签，如：http://jsfiddle.net/mv8q5/3/

如果你想要它在一个新行中，把它放在一个新的分区中，比如：http://jsfiddle.net/mv8q5/4/

相关讨论