Michdd Posted July 10, 2009 Share Posted July 10, 2009 Is it possible to make the height of the div so that it only displays the top line of that div? I'm waiting to create something dynamic using javascript that will only display the first line of the div until the mouse is over it, then it will display the full div. Quote Link to comment https://forums.phpfreaks.com/topic/165545-shortening-a-div-to-1-line/ Share on other sites More sharing options...
SuperBlue Posted July 11, 2009 Share Posted July 11, 2009 Yes, you need a set height of about 1em, then set the overflow to hidden. Be sure that the line-height is correct as well. Use div:hover { height: auto; } to show the content again. I.e <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>My first Website</title> <style type="text/css"> * { margin: 0;padding: 0; } body { padding: 1em; } div { height: 1em; overflow: hidden; } div:hover { height: auto; } p { padding: 0 0 1em; line-height: 1em; } </style> </head> <body> <div> <p>My first Website.</p> <p>My first Website.</p> <p>My first Website.</p> <p>My first Website.</p> <p>My first Website.</p> </div> </body> </html> See also: CSS Selectors Quote Link to comment https://forums.phpfreaks.com/topic/165545-shortening-a-div-to-1-line/#findComment-873279 Share on other sites More sharing options...
haku Posted July 11, 2009 Share Posted July 11, 2009 As a side point, you should rethink your logic a little on this. If the user has javascript turned off, they will never be able to see more than that first line. So what you should do is leave it as a normal div, then use javascript to change the CSS of the div to what blue boden suggested. Although to be even more efficient, you are best creating two different CSS classes - one for each state - and using javscript to toggle between the classes. It's more efficient this way, and your javascript will run smoother. Quote Link to comment https://forums.phpfreaks.com/topic/165545-shortening-a-div-to-1-line/#findComment-873308 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.