how to clip text in css like gmail does to emails subject listings


Tags: html,css

Problem :

in gmail, they display the

subject - followed by a short snippet from the body

and it looks like the body text is clipped, i am assuming this is done with css, gmail style sheets are fairly complex, so am not certain

anyway only parts of letters are showing at the end of the line where they get chopped off

does anyone know how i can achieve the same effect, so i get full length text in a column


got it sussed thanks @cletus

just to clarify, this is what i ended up with

<div style="overflow: hidden; height: 20px;">mytitle<span style="color: gray; "> - my long description goes here</span></div>


Solution :

It's overflow: hidden CSS on block elements. The block-level element part is important. See The CSS Overflow Property.


    CSS Howto..

    How do I stop a CSS layout from distorting when zooming in/out?

    How can I make an image continue across multiple sections with breaks in between?

    How could I add a header to a HTML page via CSS?

    How to create circle image and text Which are complementary to each other in bootstrap or pure css?

    How to override PrimeFaces CSS via external stylesheet

    How to center float list elements inside an unordered list

    How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

    how to crop big image in bootstrap carousel

    How to get just numeric part of CSS property with jQuery?

    How to make padding:auto work in CSS?

    How i can display the output of a rss feed in HTML format in a TWebBrowser?

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    how to adjust CSS image on mobile device while maintaining the aspect ratio

    How to do automatic reload of page when viewed in iPad Portrait mode?

    How to make this css readable?

    How to create an href that opens a div on screen? [closed]

    Jquery Show Hide with attribute

    Getting CSS3 PIE.htc to show up in child elements when used on parent element

    How to center-zoom with responsive images without affecting the image size?

    How to handle PNG image loading time in html, css

    How to modify css in OpenERP 7?

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to make container 100% of parent if it have ul inside

    How do I make entire div a link? [duplicate]

    How to wrap text in a element in IE

    How to change tab key selection color with css? [duplicate]

    How to read CSS specification?

    How to create dropdown with multiple columns?

    How to center text based on only one of two merged cells ? html/css

    How to pause a Spinkit animation?