stijn0713 Posted September 30, 2012 Share Posted September 30, 2012 Hi guys, Does anybody have a good (i.e. standardized, cross compatible) solution for adding an ellipsis and cutting of text after the div is 'full'. My div has these properties and i want to cut of the text with a read further link width: 220px; height: 180px; border: 1px dashed green; padding: 10px; overflow: hidden; line-height: 26px; font-family: Velvet; Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/ Share on other sites More sharing options...
Jessica Posted September 30, 2012 Share Posted September 30, 2012 To add the ellipsis you either need to: a. Use Javascript b. Use PHP c. Use an image You cannot do it in CSS alone. Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1381942 Share on other sites More sharing options...
Adam Posted September 30, 2012 Share Posted September 30, 2012 You can use text-overflow, but it's relatively new so support isn't great. I'm not too keen on how it looks though, you'd get a better effect using a background image on a fixed width and/or height DIV. Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1381968 Share on other sites More sharing options...
Mahngiel Posted October 1, 2012 Share Posted October 1, 2012 Like Adam said, CSS support for this is definitely slow. The biggest hurdle is that unless you're using a monospaced font, neither a PHP nor JS approach will work 100% of the time with an absolutely defined element size. You can get relatively close, so it's best to keep it flexible with something like a min-height or similar. Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1381999 Share on other sites More sharing options...
spiderwell Posted October 3, 2012 Share Posted October 3, 2012 here is a pure CSS solution for you: overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;width: 100%; Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1382491 Share on other sites More sharing options...
Mahngiel Posted October 3, 2012 Share Posted October 3, 2012 Firefox doesnt have support for this yet Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1382508 Share on other sites More sharing options...
Adam Posted October 3, 2012 Share Posted October 3, 2012 Works fine for me in FF and I'm still on v13: http://jsfiddle.net/Btr8f/ Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1382512 Share on other sites More sharing options...
Mahngiel Posted October 3, 2012 Share Posted October 3, 2012 touche, apparently its been supported since v7... my bad Quote Link to comment https://forums.phpfreaks.com/topic/268940-ellipsis/#findComment-1382517 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.