{"id":14119,"date":"2011-09-06T18:49:17","date_gmt":"2011-09-07T01:49:17","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14119"},"modified":"2014-03-28T08:59:47","modified_gmt":"2014-03-28T15:59:47","slug":"text-overflow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","title":{"rendered":"text-overflow"},"content":{"rendered":"
The Note that Text overflow can only happen on block or inline-block level elements, because the element needs to have a width in order to be overflow-ed. The overflow happens in the direction as determined by the direction<\/a> property or related attributes. <\/p>\n The following demo displays the behavior of the Setting An old version of the spec<\/a> says you could use an URL to an image for the ellipsis, but it looks as if that was dropped.<\/p>\n There is a two-value syntax, e.g. I’m not sure where The 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; \/* Required for text-overflow to […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.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":[],"acf":[],"jetpack-related-posts":[{"id":8542,"url":"https:\/\/css-tricks.com\/snippets\/css\/truncate-string-with-ellipsis\/","url_meta":{"origin":14119,"position":0},"title":"Truncate String with Ellipsis","date":"February 18, 2011","format":false,"excerpt":"All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } CodePen Embed Fallback Note the fixed width in use here. The gist is that the\u2026","rel":"","context":"In \"ellipsis\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":270051,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-clamp\/","url_meta":{"origin":14119,"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":14119,"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":14119,"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":14081,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","url_meta":{"origin":14119,"position":4},"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":[]},{"id":359742,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","url_meta":{"origin":14119,"position":5},"title":"overflow-clip-margin","date":"January 3, 2022","format":false,"excerpt":"The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. .element { height: 100px; overflow: clip; \/* required *\/ overflow-clip-margin: 20px; } overflow: clip; clips the element's content while overflow-clip-margin sets\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14119"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14119"}],"version-history":[{"count":23,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14119\/revisions"}],"predecessor-version":[{"id":167004,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14119\/revisions\/167004"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14119"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}text-overflow<\/code> 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).<\/p>\n
.ellipsis {\r\n text-overflow: ellipsis;\r\n\r\n \/* Required for text-overflow to do anything *\/\r\n white-space: nowrap;\r\n overflow: hidden;\r\n}<\/code><\/pre>\n
text-overflow<\/code> only occurs when the container’s
overflow<\/code><\/a> property has the value
hidden<\/code>,
scroll<\/code> or
auto<\/code> and
white-space: nowrap;<\/code>.<\/p>\n
text-overflow<\/code> property including all the possible values. Browser support varies!<\/p>\n
<\/code>Check out this Pen!<\/a><\/pre>\n
overflow<\/code> to
scroll<\/code> or
auto<\/code> will display scrollbars to reveal the additional text, while
hidden<\/code> will not. The hidden text can be selected by selecting the ellipses.<\/p>\n
Old Stuff<\/h3>\n
text-overflow: ellipsis ellipsis;<\/code>, that would control the overflow on the left and right sides of the same container. I’m not sure how that would be possible to achieve. Perhaps centered text in a too-small container? The new spec<\/a> says this, as well as defining a string, is “at risk.”<\/p>\n
ellipsis-word<\/code> came from. It’s not in the spec or in any other documentation other than on WebPlatform.org<\/a>.<\/p>\n
text-overflow<\/code> property used to be <\/em>shorthand for the combination of
text-overflow-mode<\/code> and
text-overflow-ellipsis<\/code>, but not anymore and those separate properties don’t exist.<\/p>\n
Related Properties<\/h3>\n
\n
white-space<\/code><\/a><\/li>\n
overflow<\/code><\/a><\/li>\n
word-break<\/code><\/a><\/li>\n
width<\/code><\/a><\/li>\n<\/ul>\n
Other Resources<\/h3>\n
\n
Browser Support<\/h3>\n
\n\n
\n Chrome<\/span><\/th>\n Safari<\/span><\/th>\n Firefox<\/span><\/th>\n Opera<\/span><\/th>\n IE<\/span><\/th>\n Android<\/span><\/th>\n iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n\n \n 25+<\/td>\n 5.1+<\/td>\n 19+<\/td>\n 12.1+<\/td>\n IE8+<\/td>\n 2.1+<\/td>\n 3.2+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"