hide part of the text html, css, javascript - Stack Overflow

admin管理员组

文章数量:1291202

How to hide part of the text inside div or span ?

I have a text of 160 characters but I would like to display only first 40.

I have to have the complete text inside my div, span as I do javascript searches.

How to hide part of the text inside div or span ?

I have a text of 160 characters but I would like to display only first 40.

I have to have the complete text inside my div, span as I do javascript searches.

• javascript
• html
• css
• hide

Share Improve this question Follow edited Jun 24, 2015 at 13:14 geothachankary 1,08211 gold badge1818 silver badges3131 bronze badges asked Mar 14, 2012 at 10:24 m1k3y3m1k3y3 2,78888 gold badges4040 silver badges6868 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 18

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.

For Example:

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

*Tested in Chrome.

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.

Something like that should be the result:

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

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.

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.

An interesting property to show/hide part of the text that it is standard in CSS is text-overflow. No JS is required. The width of the text (200px in the example of the snippet below) correspond to the "clip" of the text you want to be shown by default.

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>

本文标签： hide part of the text htmlcssJavaScriptStack Overflow