{"id":8542,"date":"2011-02-18T06:03:21","date_gmt":"2011-02-18T13:03:21","guid":{"rendered":"http:\/\/css-tricks.com\/"},"modified":"2022-09-30T10:58:16","modified_gmt":"2022-09-30T17:58:16","slug":"truncate-string-with-ellipsis","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/truncate-string-with-ellipsis\/","title":{"rendered":"Truncate String with Ellipsis"},"content":{"rendered":"\n<p>All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.truncate {\n  width: 250px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QVByaJ\" src=\"\/\/codepen.io\/anon\/embed\/QVByaJ?height=450&amp;theme-id=1&amp;slug-hash=QVByaJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QVByaJ\" title=\"CodePen Embed QVByaJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_zqedEr\" src=\"\/\/codepen.io\/anon\/embed\/zqedEr?height=450&amp;theme-id=1&amp;slug-hash=zqedEr&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed zqedEr\" title=\"CodePen Embed zqedEr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>Looking for <a href=\"https:\/\/css-tricks.com\/line-clampin\/\">truncating to a particular number of lines<\/a>? You might also dig <a href=\"https:\/\/css-tricks.com\/recreating-mdns-truncated-text-effect\/\">this neat fading truncation effect<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox: Looking for [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1486,1485,1414],"acf":[],"jetpack-related-posts":[{"id":14119,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","url_meta":{"origin":8542,"position":0},"title":"text-overflow","date":"September 6, 2011","format":false,"excerpt":"The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('\u2026', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). .ellipsis { text-overflow: ellipsis;\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":270051,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-clamp\/","url_meta":{"origin":8542,"position":1},"title":"line-clamp","date":"April 27, 2018","format":false,"excerpt":"The line-clamp property truncates text at a specific number of lines. The spec for it is currently an Editor's Draft, so that means nothing here is set in stone because it's a work in progress. That said, it's defined as a shorthand for max-lines and block-overflow, the former of which\u2026","rel":"","context":"In \"line-clamp\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16145,"url":"https:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/","url_meta":{"origin":8542,"position":2},"title":"Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)","date":"January 30, 2012","format":false,"excerpt":"There are times when a really long string of text can overflow the container of a layout. For example: URL's don't typically have spaces in them, so they are often culprits. Here's a big snippet with all the CSS players involved: .dont-break-out { \/* These are technically the same, but\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/01\/fixed.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":270438,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/block-overflow\/","url_meta":{"origin":8542,"position":3},"title":"block-overflow","date":"May 17, 2018","format":false,"excerpt":"The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property. The property has been introduced in the Editor's Draft of the CSS Overflow Module Level 3 specification. That means it's experimental\u2026","rel":"","context":"In \"line-clamp\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/ellipses-brackets.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3818,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/replace-excerpt-ellipsis-with-permalink\/","url_meta":{"origin":8542,"position":4},"title":"Replace Excerpt Ellipsis with Permalink","date":"September 4, 2009","format":false,"excerpt":"This is useful if you would like to replace the ellipsis [...] from the excerpt with a permalink to the post. functions.php addition: function replace_excerpt($content) { return str_replace('[...]', 'Continue Reading', $content ); } add_filter('the_excerpt', 'replace_excerpt');","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":8542,"position":5},"title":"overflow","date":"September 5, 2011","format":false,"excerpt":"The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you\u2026","rel":"","context":"In \"overflow\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8542"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=8542"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8542\/revisions"}],"predecessor-version":[{"id":374115,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/8542\/revisions\/374115"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=8542"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=8542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}