隐藏部分文本html,css,javascript

Question

如何隐藏部分文本div或span？

我有160个字符的文字,但我想只显示前40个字符.

我必须在我的内部有完整的文本div,span因为我做javascript搜索.

Answer 1

您可以为元素"text-overflow:ellipsis"使用简单的css属性.要有效地使用此属性,您需要应用一些相关属性.

例如:

<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;">Some text goes here</div>

*在Chrome中测试过.

Answer 2

你需要一些javascript来创建一个跨越最后120个字符的范围来隐藏它们.有一个CSS属性"visibility:hidden"可以应用于span.

应该是这样的结果:

<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div>

Answer 3

如果要将 div 裁剪为特定大小，而不是确切的字符数，则只需为 div 指定所需大小并指定overflow: hidden裁剪不适合的内容即可。

如果您确保 div 的高度是文本行高的多个，则不会在行的（垂直）中间剪切内容。