How to use text overflow property in CSS ? Last Updated : 23 Apr, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to set text overflow property in CSS. The text-overflow property is used to specify that some text has overflown and hidden from view from the user. The text-overflow property only affects content that is overflowing a block container element. Syntax: text-overflow: clip| ellipsis Property Value: clip: Text is clipped and cannot be seen. This is the default value.ellipsis: Text is clipped and the clipped text is represented as ‘…’ . Note: The white-space Property in CSS is used to control the text wrapping and white-spacing which you will encounter in below examples. Example 1: Using clip Property value. HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; } .gfg { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: clip; border: 1px solid #29bb89; } </style> </head> <body> <h1>Welcome to GeeksforGeeks</h1> <h4>Text overflow: Clip</h4> <div class="gfg"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and Gate preparation Notes. </div> </body> </html> Output: Example 2: Using ellipsis property value. HTML <!DOCTYPE html> <html> <head> <style> h1 { color: green; } .gfg { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid #29bb89; } .gfg1 { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 3px solid #29bb89; } </style> </head> <body> <h1>Welcome to GeeksforGeeks</h1> <h4>Text overflow: ellipsis</h4> <div class="gfg"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and Gate preparation Notes. </div> <br> <div class="gfg1"> Aman Rathod</div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to use text-overflow in a table cell ? A aksrathod07 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to set the overflow property to scroll in CSS ? In this article, we will see how to set the overflow property to scroll in CSS. The overflow property is used to control the big content. It tells what to do when an element's content is too big to fit in the specified area. When the overflow property is set to scroll, the overflow is clipped, but a 2 min read How to use text-overflow in a table cell ? In this article, we will see how to use text-overflow in a table cell. A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. Approach: The white-space property must be set to "nowrap" and the overflow property must be set to "hidden". The overflowing c 2 min read How to Prevent Text from Overflowing in CSS? Text overflow happens when an HTML element's content goes beyond the limits of its container. This could break the layout or hide content, which would result in an unpleasant user experience. Using overflow properties, changing the container width, and managing word wrapping and breaking are some of 4 min read CSS overflow-x Property The overflow-x property in CSS specifies whether to add a scroll bar, clip the content, or display overflow content of a block-level element, when it overflows at the left and right edges. In other words, this property helps us to display the content which is overflowing from the page horizontally.T 3 min read CSS overflow-y Property The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element's top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property. Syntax: overflow-y: scroll | hidden 5 min read CSS overflow Property The CSS overflow property is used to set the overflow behavior of an element. It is the shorthand property of overflow-x and overflow-y properties. This property is used to control the large content.Syntax:overflow: visible | hidden | clip | scroll | auto;Property Values:visible: The content is not 2 min read Like