Menu
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.
596
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”. document. getElementById("element").
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
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.
165
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
