How to hide part of the text inside div or span ?
如何隐藏div或span中的部分文本？
I have a text of 160 characters but I would like to display only first 40.
我有160个字符的文字，但我想只显示前40个。
I have to have the complete text inside my div, span as I do javascript searches.
我必须在我的div中包含完整的文本，因为我进行了javascript搜索。
3 个解决方案
#1
5
You will need some javascript to create a span arround the last 120 characters that hides them. There is a CSS attribute "visibility:hidden" that can be applied to the span.
你需要一些javascript来创建一个跨越最后120个字符的范围来隐藏它们。有一个CSS属性“visibility：hidden”可以应用于span。
Something like that should be the result:
应该是这样的结果：
<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div>
#2
12
You can use a simple css property for your element "text-overflow: ellipsis;" to use this property effectively you need to apply some related properties along with that.
您可以为元素使用简单的css属性“text-overflow：ellipsis;”要有效地使用此属性，您需要应用一些相关属性。
For Example:
例如：
<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;">Some text goes here</div>
*Tested in Chrome.
*在Chrome中测试过。
#3
4
If you want to clip the div to a certain size, rather than an exact number of characters, you can just give the div the size you want and specify overflow: hidden to clip the content that doesn't fit.
如果要将div剪切为特定大小而不是确切数量的字符，则可以只给div所需的大小并指定overflow：hidden来剪切不适合的内容。
If you make sure the height of the div is a multitude of the line height of the text, you won't have the content clipped in the (vertical) middle of a line.
如果确保div的高度是文本行高的多个，则不会在一行的（垂直）中间剪切内容。
#1
5
You will need some javascript to create a span arround the last 120 characters that hides them. There is a CSS attribute "visibility:hidden" that can be applied to the span.
你需要一些javascript来创建一个跨越最后120个字符的范围来隐藏它们。有一个CSS属性“visibility：hidden”可以应用于span。
Something like that should be the result:
应该是这样的结果：
<div>first 40 chars <span style="visibility:hidden">last 120 chars</span></div>
#2
12
You can use a simple css property for your element "text-overflow: ellipsis;" to use this property effectively you need to apply some related properties along with that.
您可以为元素使用简单的css属性“text-overflow：ellipsis;”要有效地使用此属性，您需要应用一些相关属性。
For Example:
例如：
<div style="width: 50px; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;">Some text goes here</div>
*Tested in Chrome.
*在Chrome中测试过。
#3
4
If you want to clip the div to a certain size, rather than an exact number of characters, you can just give the div the size you want and specify overflow: hidden to clip the content that doesn't fit.
如果要将div剪切为特定大小而不是确切数量的字符，则可以只给div所需的大小并指定overflow：hidden来剪切不适合的内容。
If you make sure the height of the div is a multitude of the line height of the text, you won't have the content clipped in the (vertical) middle of a line.
如果确保div的高度是文本行高的多个，则不会在一行的（垂直）中间剪切内容。