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.
Add a comment
|
4 Answers
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.
Comments
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>
2 Comments
No Results Found
This begs the question: "How do I find the first 40 characters?"... (assuming this isn't static HTML)
GolezTrol
@Madmartigan If it isn't static HTML, you could add the span when generating the page on the server. Shouldn't be too hard in PHP or ASP. Easy with JQuery as well.
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.
Comments
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>