Question

如何隐藏div或span内的部分文字？

我有一个160个字符的文字，但我想只显示前40个。

我必须在div，span内填写完整的文字，因为我会进行javascript搜索。

Answer 1

您可以为元素使用简单的css属性＆＃34; text-overflow：省略号;＆＃34; 要有效地使用此属性，您需要应用一些相关属性。

例如：

<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的高度是文本行高的多个，你就不会在一行的（垂直）中间剪切内容。

Answer 4

文本溢出是一个有趣的属性，用于显示/隐藏在CSS中是标准文本的一部分。不需要JS。文本的宽度（在下面的代码段示例中为200px）对应于您希望默认显示的文本的“剪辑”。

div {
  width: 100%; 
}

div.autoShowHide {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

div.autoShowHide:hover {
  white-space: normal; 
  overflow: visible;
  width: 100%; 
}

<p>Go over the text to see the full text:</p>

<div class="autoShowHide">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor.</div>

隐藏部分文本html，css，javascript

4 个答案: