{"id":1872,"date":"2016-01-13T15:21:29","date_gmt":"2016-01-13T15:21:29","guid":{"rendered":"http:\/\/cssreset.com\/?p=1872"},"modified":"2016-01-13T15:21:29","modified_gmt":"2016-01-13T15:21:29","slug":"how-to-cut-off-text-overflow-with-an-ellipsis","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-cut-off-text-overflow-with-an-ellipsis\/","title":{"rendered":"How to Cut Off Text-Overflow with an Ellipsis"},"content":{"rendered":"

CSS’s text-overflow<\/strong> property is rarely used but easy to implement. When given the \u00a0value of ellipsis<\/strong>, it adds an ellipsis to the cut off point of any text that doesn’t fit within its parent element.<\/p>\n

\"ellipsis\"<\/p>\n

The CSS to achieve the effect above looks like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. p{<\/span><\/div><\/li>\n
  2. white-space<\/span>:<\/span> nowrap<\/span>;<\/span> \/\/this prevents line breaks<\/div><\/li>\n
  3. overflow<\/span>:<\/span> hidden<\/span>;<\/span> \/\/this hides text<\/span> that doesnt fit within the div<\/div><\/li>\n
  4. text-overflow:<\/span> ellipsis;<\/span> \/\/this adds the ellipsis to the cutoff point<\/div><\/li>\n
  5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    This effect only works for single lines, which is why we must include the white-space<\/strong> property for it to be functional. It also must be used in conjunction with the overflow: hidden<\/strong> property\/value.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    CSS’s text-overflow property is rarely used but easy to implement. When given the \u00a0value of ellipsis, it adds an ellipsis to the cut off point of any text that doesn’t fit within its parent element.<\/p>\n<\/p>\n

    The CSS to achieve the effect […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,4,6,36],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1872"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1872"}],"version-history":[{"count":5,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1872\/revisions"}],"predecessor-version":[{"id":1881,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1872\/revisions\/1881"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}