{"flag":true,"single":true,"pageTitle":"How to Use CSS to Show Text in One Line with Ellipsis","post":{"id":35,"user_id":"1","slug":"how-to-use-css-to-show-text-in-one-line-with-ellipsis-ec2a","title":"How to Use CSS to Show Text in One Line with Ellipsis","body":"<p>Are you tired of your text overflowing onto multiple lines and ruining your design? The CSS property, text-overflow: ellipsis, can help you show your text in one line with an ellipsis at the end to indicate that there is more text that has been truncated.<\/p>\r\n<p>CSS CODE<\/p>\r\n<pre class=\"language-markup\"><code>.text_one_line {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}<\/code><\/pre>\r\n<p>HTML CODE<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div class=\"text_one_line\" style=\"width:200px\"&gt;\r\n  &lt;p&gt;Here is some text that should be truncated if it exceeds the width of the container.&lt;\/p&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p>The <strong>overflow: hidden<\/strong> property ensures that any text that exceeds the width of the container is not visible.<\/p>\r\n<p><strong>white-space: nowrap<\/strong> ensures that the text does not wrap to the next line.<\/p>\r\n<p><strong>text-overflow: ellipsis<\/strong> adds an ellipsis at the end of the line to indicate that there is more text that has been truncated.<\/p>","category_id":"10","is_private":"0","created_at":"2023-03-21T01:22:29.000000Z","updated_at":"2023-03-21T01:22:29.000000Z","category":{"id":10,"user_id":"1","name":"CSS","slug":"css-a43c","parent_id":null,"created_at":"2023-03-21T01:17:14.000000Z","updated_at":"2023-03-21T01:17:14.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Are you tired of your text overflowing onto multiple lines and ruining your design? The CSS property, text-overflow: ellipsis, can help you  - How to Use CSS to Show Text in One Line with Ellipsis (Updated: March 21, 2023) - Read more about How to Use CSS to Show Text in One Line with Ellipsis at my programming site [SITE]","categories":[]}