+ 1

Is it possible to add readmore using overflow property?

1st Jul 2016, 2:49 PM
Rohmat S
4 Answers
+ 2
Yes, I think you need to use JavaScript for this
15th Jul 2016, 4:17 AM
ThreeG - avatar
+ 2
Rohmat, it really depends on how you want this read more function to work and how the content of your page is structured. Is the page mostly content or is it a main page that has a featured content section and you want to display snippets of some articles? This will change how you go about writing the code. If your situation is the latter you can use the overflow property to define a section of the content, lets call this text area, <p class="some"></p> to hold the content. Then you need to add the CSS, .some{ overflow: hidden; overflow-wrap: normal; } It's important to note that the width and height property are the real game changers for what you are looking to accomplish. The overflow-wrap property will make sure that the hide property only happens during the normal white space between words. The CSS code should also contain spacial properties defining the size of the content box to control how many characters are shown before the overflow property hides the text. Though I don't suggest it, when displaying a single line of text you can use the text-wrap property instead of word-wrap. Now it's important to define how do you envision this Read More function working on the page. Does it expose the rest of the text or does it redirect the user to a new url to read the full text? If you just want to redirect the user then create a link in the HTML like so, <a href="http://www.more.com">read more</a> This same method can be applied to the text inside the <p> section just make sure you don't accidentally hide it! To implement a Read More feature that opens on the same page you will need to use a pseudo class like hover or more advanced methods like checkbox. If you want clicking on the read more link to open a drop down I would use the checkbox method. To see how visit my JS Fiddle example here -> https://jsfiddle.net/alyssaraefox/kh26nr7q/
9th Jan 2017, 7:11 PM
Alyssa Rae Fox
Alyssa Rae Fox - avatar
Yes, using javascript/jquery you can achieve this. Another way to do it, is using special html tags: <details> and <summary>. These tags are useful to show and collapse specific content and they even work with no css rules; but of course you can apply some css rules to beauty your tags, content and behavior. Jus remember to check for browser support: http://caniuse.com/#feat=details
11th Nov 2016, 1:04 AM
Jorge Escamilla
Jorge Escamilla - avatar
but how (example) is all I need pla help out
16th Dec 2016, 3:40 PM
Cele Prince
Cele Prince - avatar