text overflow ellipsis not working safari

[Fix] CSS text overflow ellipsis not working

This post will go over how to fix your text-overflow:ellipsis not working issues

🔔 Table of contents

When creating web component that contains long text, we can use the text-overflow:ellipsis CSS property to clip the content so that it does not ruin our design.

For example, when you have a gallery grid with image titles, when we have a very long title it can stuff up the layout.

To get around this we can use the text-overflow:ellipsis to add a ... when the text is longer than the specified width of the grid.

Reasons text-overflow:ellipsis is not working in your code

• Check the containing element has a width value set. Only explicit units such as px , em , rem will work. Percentage units ( % ) will not work here!
• Will not work when the containing element does not have overflow:hidden AND white-space:nowrap set.

What is text-overflow:ellipsis used for? Generally, when we use this technique to add a ellipis ( ... ) to clip our long content. This can be useful for grid or card components, when the text is too long that could break your layout. More information here https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Steps to fix text-overflow:ellipsis issues

• Review the containing element and add a width (or max-width )value that is not percentage (%)
• Add overflow:hidden AND white-space:nowrap
• Check the HTML tag default display property. Tags such as <a> have a default of display:inline . This does not support widths and therefore the text-overflow:ellipsis will not work!

Review the containing element and add a width value that is not percentage (%)

Take the following example HTML with long text:

And we have the following CSS that is not working and we want to make the text cut off with an ellipsis ( ... ). We need to a widht or max-width value:

This will give the result that looks like the following:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

💡 Tip: Hack to use % percentages If you really want to use percentages instead of the explicit units such as pixels px for your widths, we can use the calc() method. For example, if you want 80% width, we can do width:calc(80%) . The calc() function ultimately converts the values to pixels which will work!

Adding overflow:hidden AND white-space:nowrap

For text-overflow:ellipsis to work correctly, we need to have the following properties set:

overflow:hidden overrides the default behaviour when the content of an element overflows its width/ height. In this case, we want to hide/clip the content if it is larger than the container. This value will not show any scrollbars or give the user opportunity to scroll.

white-space:nowrap tells to the browser to collapse white space (change multiple white spaces in a piece of text into one space) and suppress line breaks.

Check the HTML tag default display property

Since text-overflow:ellipsis requires you to explictly set the width of the element, we have to review the display property of the element.

Elements that have display:inline as their default behaviour will not work. This is because display:inline will not allow you to set the width of the element - and this will be required by text-overflow:ellipsis .

One way to get around this is to set the display to display:inline-block or display:block .

So when trying to add a ellipsis, make sure to review the following HTML tags that have display:inline as their default.

How to fix text-overflow:ellipsis issues with flex layouts

When dealing with flex layouts, sometimes the text-overflow:ellipsis does not work as we expect. When we have a long text and want to clip it will ellipsis, the flex column appears to be wider than it should be!

Open the following codepen in another page to see the full effect:

As we can see in the above example, the first two examples do not behave as we expect it to. The first two examples, we can see that the clipped text expands the column width !

To fix this we add the min-width:0 property to the parent element that contains the text (or the outer most container that the width is overflowing)!

💡 Tip: Modern approach for dynamic widths is to use grids If your content is expected to be responsive and contains dynamics width, I would recommend to use grids!

text-overflow:ellipsis fix for multiple lines

If we want to have ellipsis on multiple lines, we cant use text-overflow:ellipsis . This is because it was designed with single line texts in mind.

There is one way to do this for multi-line, but it will not be supported for non-webkit browsers (eg Firefox and IE).

We can use the -webkit-line-clamp browser prefix:

💡 Note : As of Firefox version 68, -webkit-line-clamp is supported! https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#css

For Opera browsers, the equivalent fix to have ellipsis on multiline is text-overflow: -o-ellipsis-lastline :

Bootstrap version for text-overflow:ellipsis

If you are working with Bootstrap for your web designs, the framework comes with a built in util class to truncate/ create ellipsis for long texts.

This is the text-truncate class and simlar to our previous example, will require the element to have display of inline-block or block to work:

Browser support

text-overflow:ellipsis is generally available on the majority of modern browsers. There are some issues to consider when using this CSS property:

• Does not work in IE8 and IE9 on <input type="text">
• Does not work on select tag for Chrome and IE. Will work only for Firefox.
• For Samsung browsers, they will have issues with the text-overflow:ellipsis unless text-rendering is not set to auto .

In this post, we went over several reasons why using text-overflow:ellipsis is not working for your code and several ways to address this.

Generally, when using text-overflow:ellipsis , we need to specify the width or max-width and have the following properties set: overflow:hidden and white-space: nowrap .

If we want to have ellipsis with multilines, then we need to use vendor prefixes such as -webkit-line-clamp for WebKit based browsers. For opera browsers, we can use the equivalent of text-overflow: -o-ellipsis-lastline;

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

• [Fixed] @media query in CSS not working issue
• [Fixed] CSS :after element is not working
• [5 FIXES] for CSS z-index not working - Updated for 2023
• How to Create CSS Animation Fade In with Examples
• Fixing CSS position sticky not working issues
• Fix JavaScript setTimeout not working

The elusive text-overflow: ellipsis display issue

When you want to limit text on your web page, you really want to show an ellipsis to let people know you’ve truncated the display. This is especially true in cases where the cut-off decided by the browser might cause confusion, alarm, or blushing. Consider the text “Get offers on shoes”, which could be displayed as “Get off”. It would be more gentle to say “Get off…”. You get the idea.

The basic idea behind this in CSS is shown below. First, we limit the height , then we tell the browser not to show the content that falls outside the element with overflow , and finally we set the text-overflow

In many cases, though, this simply doesn’t do what you expect.

There are two common reasons for this.

In our above example, text wrapping will prevent the ellipsis from being displayed. We can solve this with white-space treatment to ensure our “just one line” objective is met.

In most cases, this will solve the missing ellipsis problem.

Targeting the right element

If the white-space fix doesn’t solve the problem, the second most likely issue is that an element inside your overflow element is causing your issue. You need to make sure you are targeting the element that contains the text to ensure the ellipsis sees the light of day. With the example above, moving the class to the inner-element will resolve this.

Steve Fenton is an Octonaut at Octopus Deploy and six-time Microsoft MVP for developer technologies. He’s a Software Punk and writer.

Categories:

• Programming

Testing NPM publish with a dry run

Asp.net core identity adddefaultidentity vs addidentity.

HatchJS.com

Cracking the Shell of Mystery

CSS Text Overflow Ellipsis Not Working: How to Fix It

Have you ever tried to use the CSS text-overflow property to truncate a string of text, but it just didn’t work? You’re not alone. This is a common problem, and there are a few reasons why it might be happening.

In this article, we’ll take a look at the CSS text-overflow property and explore some of the common reasons why it might not be working. We’ll also provide some tips on how to troubleshoot the issue and get your text truncation working properly.

So if you’re having trouble with CSS text overflow, read on! We’ll help you get it working in no time.

| Header 1 | Header 2 | Header 3 | |—|—|—| | Problem | Solution | Example | | Text overflow is not working | Make sure that the `overflow` property is set to `hidden`. |

| | The ellipsis is not showing up | Make sure that the `text-overflow` property is set to `ellipsis`. |

| | The ellipsis is showing up in the wrong place | Make sure that the `white-space` property is set to `nowrap`. |

In this tutorial, we will discuss the CSS text overflow ellipsis property. We will cover what it is, how to use it, and some common problems that you may encounter.

What is text overflow ellipsis?

Text overflow ellipsis is a CSS property that is used to display an ellipsis () when the text in an element is too long to fit within the element’s specified width. The ellipsis is displayed after the last character that fits within the element’s width. The ellipsis is typically rendered in a smaller font size than the rest of the text in the element.

How to use text overflow ellipsis

To use text overflow ellipsis, you simply need to add the `text-overflow` property to the element that you want to apply it to. The `text-overflow` property has three possible values:

• `clip`: This is the default value. It will clip the text to the element’s specified width, and the ellipsis will not be displayed.
• `ellipsis`: This will display the ellipsis when the text is too long to fit within the element’s specified width.
• `visible`: This will always display the text, even if it is too long to fit within the element’s specified width.

For example, the following code will display the text “This is a long text” with an ellipsis after the word “text” if the element is too narrow to fit the entire text:

Common problems with text overflow ellipsis

There are a number of common problems that you may encounter when using text overflow ellipsis. Some of the most common problems include:

• The element’s width is not specified.
• The element’s overflow property is set to something other than “hidden”.
• The element’s white-space property is set to something other than “nowrap”.

The element’s width is not specified

If the element’s width is not specified, the text overflow ellipsis property will not work. This is because the element needs to have a specified width in order to know when to display the ellipsis.

To fix this problem, simply specify a width for the element. You can do this using the `width` property, the `max-width` property, or the `min-width` property.

The element’s overflow property is set to something other than “hidden”

If the element’s overflow property is set to something other than “hidden”, the text overflow ellipsis property will not work. This is because the element needs to have its overflow property set to “hidden” in order to clip the text to the element’s specified width.

To fix this problem, simply set the element’s overflow property to “hidden”.

The element’s white-space property is set to something other than “nowrap”

If the element’s white-space property is set to something other than “nowrap”, the text overflow ellipsis property will not work. This is because the element needs to have its white-space property set to “nowrap” in order to prevent the text from wrapping to a new line.

To fix this problem, simply set the element’s white-space property to “nowrap”.

Text overflow ellipsis is a useful CSS property that can be used to display an ellipsis when the text in an element is too long to fit within the element’s specified width. However, there are a number of common problems that you may encounter when using text overflow ellipsis. By following the tips in this tutorial, you can avoid these problems and use text overflow ellipsis effectively.

Additional resources

• [MDN: Text overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
• [W3Schools: Text overflow](https://www.w3schools.com/css/css_text_overflow.asp)
• [CSS-Tricks: Text overflow](https://css-tricks.com/almanac/properties/t/text-overflow/)

3. How to fix text overflow ellipsis not working

There are a few possible reasons why text overflow ellipsis might not be working in your CSS. Here are some of the most common solutions:

• Specifying the element’s width. If the element’s width is not specified, the browser will not know how much space to allocate for the text, and the ellipsis may not be displayed correctly. To fix this, simply specify the element’s width using the `width` property.
• Setting the element’s overflow property to “hidden”. If the element’s overflow property is not set to “hidden”, the browser may display the text outside of the element’s boundaries, which can prevent the ellipsis from being displayed. To fix this, simply set the element’s overflow property to “hidden”.
• Setting the element’s white-space property to “nowrap”. If the element’s white-space property is not set to “nowrap”, the browser may wrap the text within the element, which can prevent the ellipsis from being displayed. To fix this, simply set the element’s white-space property to “nowrap”.

Once you have specified the element’s width, set the element’s overflow property to “hidden”, and set the element’s white-space property to “nowrap”, the text overflow ellipsis should start working correctly.

4. Additional resources

For more information on text overflow ellipsis, you can refer to the following resources:

• [MDN Web Docs: text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow)
• [W3C CSS Text Overflow Module Level 3](https://www.w3.org/TR/css-text-overflow-3/)

Text overflow ellipsis is a useful feature that can help to prevent text from overflowing the boundaries of an element. However, there are a few possible reasons why text overflow ellipsis might not be working in your CSS. By specifying the element’s width, setting the element’s overflow property to “hidden”, and setting the element’s white-space property to “nowrap”, you can usually fix text overflow ellipsis not working.

Q: Why isn’t my CSS text overflow ellipsis working?

A: There are a few possible reasons why your CSS text overflow ellipsis might not be working. Here are some of the most common:

• You have not specified a `white-space` value. The `white-space` property controls how whitespace is handled in a text element. If you do not specify a value for this property, the default value of `normal` will be used. This means that any whitespace characters in the text will be treated as normal characters, and the ellipsis will not be displayed.
• You have not specified a `text-overflow` value. The `text-overflow` property controls what happens when text overflows the boundaries of a text element. If you do not specify a value for this property, the default value of `clip` will be used. This means that any text that overflows the boundaries of the element will be hidden.
• You have not specified a `max-width` value. The `max-width` property controls the maximum width of a text element. If you do not specify a value for this property, the element will be able to grow to any width, which could cause the text to overflow.
• You have specified a `word-break` value of `break-all`. The `word-break` property controls how words are broken across lines. If you specify a value of `break-all`, words will be broken at any point, even if it means that the words are split in the middle. This can cause the ellipsis to be displayed in the wrong place.

To fix these problems, you can try the following:

• Specify a value for the `white-space` property, such as `nowrap`.
• Specify a value for the `text-overflow` property, such as `ellipsis`.
• Specify a value for the `max-width` property, such as `100px`.
• Specify a value for the `word-break` property, such as `normal`.

If you are still having problems, you can try using a different CSS text overflow ellipsis plugin. There are a number of different plugins available, so you should be able to find one that meets your needs.

Q: How do I use CSS to make text overflow with an ellipsis?

A: To make text overflow with an ellipsis, you can use the following CSS code:

.element { overflow: hidden; text-overflow: ellipsis; }

This code will cause any text that overflows the boundaries of the element to be hidden, and replaced with an ellipsis.

You can also use the following CSS code to make text overflow with an ellipsis and a custom character:

.element { overflow: hidden; text-overflow: ellipsis-cjk: “”; }

This code will cause any text that overflows the boundaries of the element to be hidden, and replaced with the character “.

Q: What are the different types of CSS text overflow ellipsis?

A: There are three different types of CSS text overflow ellipsis:

• Horizontal ellipsis: This is the most common type of ellipsis, and it is used when the text overflows the horizontal boundaries of the element.
• Vertical ellipsis: This type of ellipsis is used when the text overflows the vertical boundaries of the element.
• Character ellipsis: This type of ellipsis is used when you want to replace the overflowed text with a custom character.

Q: How do I prevent CSS text overflow ellipsis from breaking words?

A: To prevent CSS text overflow ellipsis from breaking words, you can use the following CSS code:

.element { overflow: hidden; text-overflow: ellipsis; word-break: keep-all; }

This code will cause any text that overflows the boundaries of the element to be hidden, and replaced with an ellipsis. However, it will also prevent the words from being broken across lines.

Q: How do I use CSS text overflow ellipsis with images?

A: To use CSS text overflow ellipsis with images, you can use the following CSS code:

.element { overflow: hidden; text-overflow: ellipsis; display: block; margin-left: auto; margin-right: auto; }

This code will

In this article, we have discussed the CSS text overflow ellipsis not working issue. We have seen that this issue can occur due to a number of reasons, such as a missing or incorrect `white-space` property, a missing or incorrect `overflow` property, or a missing or incorrect `text-overflow` property. We have also seen how to troubleshoot this issue and fix it.

Here are the key takeaways from this article:

• The `white-space` property controls how whitespace is handled in a text element.
• The `overflow` property controls what happens when a text element overflows its container.
• The `text-overflow` property controls how overflowed text is displayed.
• If you are having trouble with the CSS text overflow ellipsis not working, try checking the following:
• Make sure that the `white-space` property is set to `normal`.
• Make sure that the `overflow` property is set to `hidden`.
• Make sure that the `text-overflow` property is set to `ellipsis`.

If you have tried all of these things and the issue is still not resolved, you can try consulting a CSS expert for help.

Author Profile

Latest entries

• December 26, 2023 Error Fixing User: Anonymous is not authorized to perform: execute-api:invoke on resource: How to fix this error
• December 26, 2023 How To Guides Valid Intents Must Be Provided for the Client: Why It’s Important and How to Do It
• December 26, 2023 Error Fixing How to Fix the The Root Filesystem Requires a Manual fsck Error
• December 26, 2023 Troubleshooting How to Fix the `sed unterminated s` Command

Similar Posts

Expression must have arithmetic or unscoped enum type: what it means and how to fix it.

Expression Must Have Arithmetic or Unscoped Enum Type Have you ever been working on a Python program and gotten the error message “Expression must have arithmetic or unscoped enum type”? If so, you’re not alone. This error is a common one, and it can be tricky to figure out what it means and how to…

Malformed Node or String: What It Is and How to Fix It

Have you ever encountered a ValueError: Malformed Node or String error? If so, you’re not alone. This error is a common one, and it can be caused by a variety of issues. In this article, we’ll take a closer look at what this error means, what causes it, and how you can fix it. We’ll…

Temporary Failure Resolving Deb.debian.org: Causes and Solutions

Have you ever tried to install a Debian package and been met with the error “Temporary failure resolving deb.debian.org”? This is a common problem that can be caused by a variety of factors, from network issues to DNS problems. In this article, we’ll take a look at what causes this error and how to fix…

How to Fix ‘Cannot Resolve Symbol ‘SpringBootTest”

Cannot resolve symbol ‘springboottest’: An If you’re a Java developer, you’ve probably encountered the error “cannot resolve symbol ‘springboottest’” at some point. This error can be a real pain, especially if you’re not sure what caused it or how to fix it. In this article, we’ll take a look at what this error means and…

Autofill Method of Range Class Failed: Causes and Solutions

Autofill Method of Range Class Failed: What It Means and How to Fix It The autofill method of the Range class is a powerful tool that can be used to quickly and easily fill a range of cells with data. However, there are a few common errors that can occur when using this method, which…

Thread Starvation or Clock Leap Detected: What It Is and How to Fix It

Thread Starvation or Clock Leap Detected: What It Is and How to Fix It Have you ever been working on a project and suddenly your computer freezes? Or maybe you’ve been browsing the web and the page you’re on suddenly reloads? If so, you may have experienced a thread starvation or clock leap. Thread starvation…

CSS Text Overflow Ellipsis Not Working: A Complete Guide

As a web developer, you‘ve likely encountered an issue where the CSS text-overflow property with a value of ellipsis fails to truncate long text with an ellipsis character. Instead of getting clipped with "…", the text simply overflows its container.

In this comprehensive guide, we‘ll explore why text-overflow: ellipsis does not work on its own, how to fix it, browser compatibility, use cases, troubleshooting, and more. Whether you‘re a CSS beginner or an expert, you‘ll learn the key technical concepts and techniques to properly truncate text with ellipses across all major browsers.

Understanding Text Overflow Ellipsis

The text-overflow property in CSS controls how content that overflows its block container should be signaled to the user. By setting it to ellipsis, when text exceeds the bounds of its box, it will get replaced by an ellipsis character to indicate content is being clipped:

So with text-overflow: ellipsis applied, this text:

Will become:

This provides a cleaner way to handle long overflowing text rather than just having it get cut off awkwardly.

Some key benefits of using the ellipsis include:

• Indicating content is truncated – The ellipsis signals to users that text is being clipped.
• Preventing abrupt cut-offs mid-word – The text shrinks gracefully versus ending messily mid-word.
• Improving legibility – Ellipsizing text helps focus the user on the visible content.
• Retaining context – Even if text is clipped, the overall context is retained.

Text truncation with an ellipsis is especially useful for handling long strings of text, URLs, headlines, and any content that may exceed its container width.

When implemented correctly, it creates a clean, legible clipping effect for overflow text. But as you‘ll see next, getting it to work properly involves more than just the text-overflow property alone.

The Issue: Why Text Overflow Ellipsis Fails

Let‘s examine a common scenario where applying text-overflow: ellipsis fails to truncate the text as expected.

Given this HTML:

And this CSS:

You would reasonably expect the text to get clipped by an ellipsis once it hits 250px.

However, when you render the above code, the text does not get truncated, instead exceeding the set width.

See the Pen Text Overflow Not Working by LinuxHint (@Thelinuxcode) on CodePen .

So why doesn‘t applying just text-overflow: ellipsis work to create the ellipsis?

The Fix: Adding White-Space and Overflow

For text-overflow to work as intended, two additional CSS properties need to be set:

Here is the full code required to enable text-overflow ellipsis:

By setting white-space to nowrap, text is prevented from wrapping to new lines. Overflow: hidden then clips any content that exceeds the container.

Finally, text-overflow: ellipsis specifies that the clipped text should be signaled with an ellipsis character.

With all three properties combined, you achieve the desired truncation effect:

See the Pen Text Overflow Working by LinuxHint (@Thelinuxcode) on CodePen .

So in summary, to make text-overflow work properly, you need:

• An explicit width set
• white-space: nowrap
• overflow: hidden
• text-overflow: ellipsis

Omitting any of these will result in overflow text not being truncated with ellipses as you expect.

Browser Support and Compatibility

The text-overflow property has excellent browser support across modern browsers. There are just a few considerations around browser prefixes and legacy browser versions:

So for full cross-browser compatibility:

Safari up through version 5.1 and Internet Explorer 9 and below do not support text-overflow at all. For older browsers, you will need to use a JavaScript fallback.

According to CanIUse.com, global support for text-overflow is:

• 97.66% for text-overflow: ellipsis
• 95.95% with vendor prefixes

So while legacy browser support requires prefixes, text-overflow has widespread adoption making it a viable option for most sites.

Handling Multiline Ellipsis

The original basic implementation only ellipses a single line of text. To truncate multiline content across several lines, the CSS needs to be adjusted.

Here are two common techniques for enabling multiline ellipses:

1. Specifying a Fixed Height

By setting a fixed height on the element, you can restrict the content to a certain number of lines before truncating:

The magic comes from combining display: -webkit-box, -webkit-line-clamp, and -webkit-box-orient. This will limit the text to 3 lines before the ellipsis kicks in.

2. Using Negative Text Indent

Another approach is to hide the overflowed text off-screen to the left with a negative text indent. Then position the ellipsis with the ::after psuedo-element:

This condenses the text vertically and places the ellipsis character at the bottom right corner. The technique can clip several multiline paragraphs down to a fixed height.

Both options allow you truncate multiple lines of text with an ellipsis, providing a cleaner solution than just having the content overflow.

Working with Flexbox and Grid Layouts

When working with modern CSS layout methods like Flexbox and Grid, some special handling may be required to enable text-overflow on flex/grid items.

Enabling Ellipsis in Flexbox

Flex items shrink and size based on their content by default. To make text-overflow work, add these rules:

The min-width: 0; allows the item to shrink, triggering ellipses once the text content overflows.

Enabling Ellipsis in CSS Grid

For text overflow to work in grid layouts, set explicit track widths and add:

This will make the grid items honor their column widths, allowing text-overflow to truncate their content.

General Tips

• Use min-width: 0 on flex/grid items to allow them to shrink
• Explicitly set track widths in CSS grid
• Add overflow: hidden on grid/flex containers and/or items
• Avoid auto track sizes and auto-fit / auto-fill

Test your layouts thoroughly and tweak from there if you notice overflow issues.

Dealing with Long Words and URLs

The techniques shown so far ellipsis the text nicely. However, trouble arises when dealing with extremely long, non-breaking strings.

For example, a long product name or long URL could exceed the container width even on a single line.

There are a few ways to handle this scenario:

Add word-break

The CSS property word-break allows breaking within words if needed:

This will break a long word to the next line before hitting the overflow limit.

Hyphenate with hyphens

Automatically hyphenating words is another approach:

This will split long words with a hyphen at valid break points as needed.

For long URLs or strings without spaces, you can use zero-width spaces to create explicit wrap opportunities:

The zero-width spaces act as characters where the URL can wrap to the next line.

Ellipsis Middle of String

An alternative is to ellipsize in the middle rather than the end using text-align: center:

This will produce an ellipsis in the middle of the long string when overflowed.

With a combination of hyphenation, zero-width spaces, and centering, you can truncate even extremely long strings gracefully.

Text Truncation with JavaScript

While text-overflow works well in modern browsers, you may need to provide a JavaScript fallback for legacy browser support.

Popular third party libraries like Truncate.js provide robust text truncation in JavaScript.

For example:

Benefits of using a JavaScript text truncation library:

• Wider legacy browser support
• More flexibility truncating multiple elements
• Ability to truncate multiline content
• Customizable truncation points
• Server-side rendering support

So evaluate JavaScript solutions in addition to CSS text-overflow for maximum cross-browser coverage.

Accessibility Considerations

When truncating text, be mindful of how it impacts site accessibility:

• Ensure text alternatives are provided for assistive technology
• Avoid clipping text mid-sentence as it loses meaning
• Don’t truncate text that conveys essential information
• If truncatingTitles, include the full text in aria-label or via CSS

Test pages with a screen reader to identify any issues caused by text clipping. Avoid truncating content in a way that makes the page hard to understand.

Troubleshooting Cross Browser Issues

Text clipping with CSS does not always behave consistently across different browsers. Here are some common issues and fixes:

Text not truncating – Ensure width/height limits are explicitly set. Verify white-space and overflow are declared.

Ellipsis misplaced or missing – Double check for flex/grid gaps causing misalignment. May need vendor prefixes.

Clipping occurs mid-word – Use non-breaking spaces in text content to prevent mid-word breaks.

Zooming affects truncation – Try allowing wrapping via media queries when zoomed for readability.

Multiline ellipses not working – Requires specific multilines CSS techniques. Consider a JS fallback.

Mobile browsers overflowing – Check for flex issues on iOS. Explicit widths and overflow: hidden fix most cases.

Be sure to test across a wide range of devices and browsers. Debug layout issues by inspecting element styles and layout.

Common Text Overflow Questions

Here are answers to some frequently asked questions about text-overflow in CSS:

How can I left, right, or center align my ellipses?

Use the text-align property to change alignment of truncated text.

What are some alternatives to the ellipsis?

You can set text-overflow to a string value like "…" , "Read More" , "[+]" etc.

How do I add an ellipsis after a specific number of lines?

Set a fixed height on the container and the number of lines with -webkit-line-clamp.

Can I animate or transition the ellipsis?

Yes, you can transition or animate properties like width, height, white-space etc.

How do I ellipsis text vertically?

Use height instead of width limits and set white-space: nowrap and overflow just like horizontally.

Does text-overflow work with display: inline elements?

No, text-overflow requires a block-level container element.

The Evolution of Text Overflow in CSS

The text-overflow property was first introduced by Microsoft in Internet Explorer 5.5 way back in July 2000.

Firefox later added support in version 7, followed by Chrome and Safari. It took over a decade for text-overflow to achieve widespread adoption across modern browsers.

Early on, prefixes were required for quite a while. It was officially standardized in CSS Overflow Module Level 3 in 2012.

So while text-overflow is now stable, it does have a long browser history you may encounter depending on your site’s targets and traffic. The details provided in this guide will help you handle any legacy browser issues.

Handling overflowing text gracefully is a common need on most sites. The text-overflow property gives us a way truncate long text with an ellipsis purely using CSS.

As shown throughout this guide, getting text-overflow to work properly requires:

• Explicit widths and heights
• white-space: nowrap to prevent wrapping
• overflow: hidden to clip overflow
• Considerations for multiline content
• Testing across browsers and devices

Combine text-overflow with whitespace, overflow, and dimension controls to reliably ellipsize text responsively.

While text clipping seems simple on the surface, the techniques explored here address common issues you may face in practice across different browsers, layouts, and content.

There is quite a deep body of knowledge around finely tuning text truncation effects. I hope this guide provides a definitive reference to level up your abilities dealing with overflowing text in CSS.

Let me know if you have any other text-overflow questions!

You maybe like,

Related posts, @import and partials in sass | explained.

Supercharging Sass with @import and Partials Hey friends! As front-end developers, we love Sass. It makes writing CSS enjoyable with its arsenal of features –…

10 Must-Play HTML5 Games That Showcase the Future of Web Gaming

HTML5 has ignited a revolution in game development. With its extensive markup language, powerful JavaScript APIs, and support for accelerated graphics through Canvas and WebGL,…

3 Easy Ways to Place Images Side by Side in HTML & CSS

Placing images side-by-side is a common task in web design. It allows you to create an appealing layout with photos, illustrations, icons, and more. In…

A Complete Guide to Ordered Lists in HTML: Usage, Customization, and Best Practices

Ordered lists allow you to easily structure numbered and sequenced content in your web pages. This comprehensive guide will teach you how ordered lists work…

A Complete Guide to the Powerful CSS Inset Property

The CSS inset property gives developers a concise way to set all inner offsets on an element simultaneously. When browser support improves, inset could eliminate…

A Complete Guide to Using Google Icons in Your Web Projects

Icons are a vital part of creating intuitive and visually appealing web interfaces. Implemented well, icons enhance the user experience by communicating complex ideas quickly…

• Skip to main content
• Select language
• Skip to search
• text-overflow

Formal syntax

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis (' … ', U+2026 Horizontal Ellipsis ), or display a custom string.

The text-overflow property doesn't force an overflow to occur. To make text overflow its container you have to set some other CSS properties. For example:

The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).

The text-overflow property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

Each value is specified as one of:

• one of the keyword values: clip , ellipsis , fade
• the function | <percentage> )">fade() , which is passed a CSS data type represents a distance value. Many CSS properties take <length> values, such as width, margin,  padding, font-size, border-width, text-shadow, and many others."> <length> or a CSS data type represents a percentage value. Many CSS properties can take <percentage> values, often to define a size as relative to its parent object. Many CSS properties can use percentages, such as width, margin, padding, font-size, and many others."> <percentage> to control the fade distance
• a "><string> .

Specifications

A previous version of this interface reached the Candidate Recommendation status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the Working Draft level, explaining why browsers implemented this property unprefixed, though not at the CR state.

Browser compatibility

[1] Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), handling of text-overflow on blocks with inline overflow on both horizontal sides has been corrected; previously, if you specified only one value (such as text-overflow:ellipsis; ), ellipsing was happening on both sides instead of just the end edge based on the block's text direction.

[2] Internet Explorer 8 introduced the prefixed version, -ms-text-overflow , synonymous with text-overflow . Do not use this prefixed version.

[3] Opera 9 and 10 require the prefixed version, -o-text-overflow .

• Related CSS properties: overflow , white-space
• CSS properties that control line breaks in words: overflow-wrap , word-break

Document Tags and Contributors

• CSS Property
• NeedsMobileBrowserCompatibility
• CSS Reference
• CSS User Interface
• Using URL values for the cursor property
• caret-color
• outline-color
• outline-offset
• outline-style
• outline-width

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout.

For example:

Here’s a big snippet with all the CSS players involved:

That would fix the issue for us:

Here’s the scoop:

• overflow-wrap: break-word; makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says , they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap . Blink (tested Chrome v45) will take either one.
• With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an “acceptable break” character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.
• You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn’t at time of writing, Firefox does).
• word-break: break-all; is to tell the browser that it’s OK to break the word wherever it needs to. Even though it kinda does that anyway so I’m not sure in what cases it’s 100% necessary.

If you want be more manual with hyphens, you can suggest them in your markup. See more on the MDN page .

Browser support

For word-break :.

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Mobile / Tablet

For hypens :, for overflow-wrap :, for text-overflow :, preventing overflow with ellipsis.

Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:

This nice thing about using text-overflow is that it is supported universally .

See the Pen Hyphenate Long Words by CSS-Tricks ( @css-tricks ) on CodePen .

See the Pen Ellipses by CSS-Tricks ( @css-tricks ) on CodePen .

See the Pen Figuring Out Line Wrapping by Chris Coyier ( @chriscoyier ) on CodePen .

More Resources

• Michael Scharnagl: Dealing with long words in CSS
• Kenneth Auchenberg: Word wrapping/hyphenation using CSS
• MDN: word-wrap , word-break , hyphens
• Spec: CSS Text Level 3

For the SCSS-inclined

These tend to be the kind of things you sprinkle into code where needed, so they make for nice @mixins:

Apparently, overflow-wrap is the new word-wrap as its been removed from the CSS3 spec. I just read about this only a couple of days ago, along with some other interesting proposed typographic properties:

http://www.impressivewebs.com/new-css3-text-wrap/

Worth noting: although word-wrap has been removed from spec there is no current browser support for the replacement property!

But before you go rushing into changing all that word-wrap goodness you just added – from the spec : “For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property.”

the surrounding element must have a specified width or your long url will still break out of the box.

You solved a problem I’ve been having. Awesome!

Thanks agentsuperdave, this tip was extremely useful. For a table, that means you should use “table-layout: fixed” and specify widths for your tds.

Quentin, I love you man, you saved my ass! ;)

Btw. I didn’t declare width, just “table {table-layout: fixed; width: 100%}” and “table a {word-wrap: break-word}”.

I didn’t declare “td” width, just…

Yeah, it works too. In my case I needed a different width for each column.

Great thanks for that, I had been looking for a solution for word-break in FF for like an hour. Cheers

Your robust solution fixed my issue, my URL did not want to break while inside a table styled to be responsive (display:block). Cheers!

fix example from

If these options dont’ give you enough control, see this question on SO, especially two of my answers (;-), http://stackoverflow.com/a/6298738/736006 and http://stackoverflow.com/a/6508168/736006 .

Thanks man!

I tried using this :

// Given on the top post

-ms-word-break: break-all; word-break: break-all;

-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

but was not working.

Until i added

float:left and a width.

Now it is working perfectly fine.

This is working fine in all browsers.

I tried all these solutions and it works perfectly in Safari, Firefox and IE but it does not work in the newest Chrome.

The one I ended up using now is this from the article:

The article says it is supposed to work in Chrome. Does anyone know what the issue might be?

If you are using Compass, there is a mixin available that includes all of this code:

Thanks for the tip @Damon. Sadly I am not using Compass and do not have the option to use it at the company I am working.

But does the code in the mixin include code that works for Chrome aswell?

Thanks this was really useful and helped me fix an issue with links not wrapping in the prefooter area of my Drupal site. You may be interested in checking out the result here in the third prefooter area: http://www.mtusesthis.com/

This is wrapping every word, so even if I have say “teams” at the end of a line and it does not quite fit, the “s” is pushed to the next line. I only want words wrapped that are longer than the width of my div. Am I doing something wrong here? Is there something else I can do to achieve this? Thanks.

I think you should think about including a js library to get such a refinement – e.g.: https://code.google.com/p/hyphenator/

it has a setting to get that behaviour: minwordlength : 10

Awesome! It works like a charm ^.^, thanks for tip!

And the too long email-adresses??

Really, for more control, check out the Stack Overflow posts I referred to above. Works very well, if js is an option.

Dave Merrill Permalink to comment# FEBRUARY 10, 2014 Really, for more control, check out the Stack Overflow posts I referred to above. Works very well, if js is an option.

Dave is right, and actually, js should be an option, since we’re talking about – essentially – aesthetics

Thanks Chris! I was scratching my head on this one!

Worked like a charm in FF, Chrome and Safari for me, didn’t check IE

I’m working with DocBook, it outputs to a PDF. My table’s cell’s content is not word wrapping with words that are long and have no spaces. I believe our css is a docbook_custom.xsl Where would I set these word wrap adn break statement?

Very useful, indeed. Thank you.

The fact that break-all breaks words in weird places was a no-no for me, so I removed it and instead added word-wrap: break-word .

My mixin now looks like this:

It seems to be working OK in Chrome, Safari, Firefox, IE9-10, unless I’m missing something.

Your solution does seem to work better than the article’s solution. The problem I had was that the super long words were broken to the next line as expected but a smaller word that could fit on the next one would be also broken instead of simply be “pushed” to the next line.

see the “bad” one (Chris’ solution), notice the “d” is cut: http://imgur.com/avo2kxS,i0aqqwX#1 see the good one (Sugarenia’s solution): http://imgur.com/avo2kxS,i0aqqwX

Thanks! Was looking for it.

great! pointed me in the right direction when encountering a layout issue due to long words / strings / text. thanks.

PHP and HTML5 to the rescue:

$url = str_replace(‘/’,’/<WBR>’,htmlentities($url))

of course, don’t do this to the url in the HREF, just the one that is displayed.

Thanks a lot for the tip. Worked using a long word within %width table

Thank you very much. I have a table that spans 100% screen width, the first two columns contain timestamps and nicknames (the latter being of variable width) and the third contains text and should fill the available space. Long URLs however kept adding a horizontal scroll bar because they extended the table beyond 100% screen width. Your CSS made the text column wrap text exactly when it should, not more (break between any two characters) or less (live with horizontal scrolling). Thank you.

If all these suggestions fail, make sure your long text is NOT affected by { white-space: nowrap } (facepalm)

Ellipsis works for single-line truncating. However, there’s not yet a good way to truncate multi-line elements. For example, suppose you text that spans 3 (or more) lines, but you want to allow up to 2 lines of text before displaying the ellipsis. There’s no good way to do this.

Here’s a bunch of ways: https://css-tricks.com/line-clampin/

Possibly try this JavaScript solution:

It’ll crop to a set number of lines, add an ellipsis, and responsively at that. It also accessibly expands the copy onclick but that feature could be edited out.

We’ve used it with great success on Tesco Food Love Stories:

https://www.tesco.com/food-love-stories/

I had seen that already, but as you wrote in that article: “There are a couple of ways to get it done, none of them spectacular.” I was going to look at the Clamp.js way, but the example in your article seems to not be working, and that deterred me from investigating further. I just wish there was a standard way for doing this.

It’s worth noting that Chrome behaves differently to IE 11 and Edge when using on inline elements within a table.

Chrome works as expected however IE 11 and Edge require the mixin class to be applied to the ‘td’ itself

Hyphenation is a good technique. While Ellipsis has cross-browser issues.

I always end up coming to this site about 90% of the time for WORKING css answers. It pisses me off to no end how many other sites give advice and their solutions don’t work. StackOverflow is the biggest culprit. Very good stuff on wrapping long text. We will be using it at our site.

@Dave Murray: so TRUE :D Nice Mixins, awesome!

Only thing that works for me in all browsers is word-break: break-word;

Doh, sorry, typo. Make that word-break: break-all;

When using flex, it will sometimes not work.

You will need to use

On the block, in addition of the break-word rules.

Per this CodePen:

http://codepen.io/anon/pen/YWZWJV

I can’t get a url only to wrap in a table cell in IE. As noted here:

IE expects the css to be applied to the td and/or the table, which wraps all of the text therein, not just the url. Does anybody know a way around this?

Perfect solution. The break-word vs break-all was killing me, in a dynamically sized div with display:table-cell;

Works brilliantly. Just used it like this on a new web site with a long email address.

This is awesome! Thanks for your work Chris!

Chris, thanks for the tips! At the time of writing, Chrome still doesn’t properly support Hyphen so the wrap/break solution is still necessary. Firefox is happy to break long urls at the / char using just Hyphen.

Thank you very much! It was so helpful, I even left a comment ;-)

Good morning comrades. It’s very possible that I missed it, but is there a way to set this up so that it kicks in only when the screen is a certain size? For instance when a title or a heading displays fine on desktop and tablet, but runs off the screen to the right on a smartphone? When that happens it would be great to have something that reduces the point size of the element in question.

Just what I needed! Thank you so much!

Just fought with this today: there’s an issue in IE11 & Edge – if you have display: flex on the container that holds the text with a long URL / word, it won’t wrap. This pen shows a reduced demo: https://codepen.io/jdsteinbach/pen/JBZrLR?editors=1100

Hey Chris! According to the Chicago Manual of Style, “ To avoid confusion, an address that contains a hyphen should never be broken at the hyphen; nor should a hyphen be added to break an e-mail address or URL. ”

If following this advice, hyphen: auto should only apply to long words since it would add hyphens to force a break. But even if you stop targeting URLs with hyphen: auto , they may still break if they contain hyphens. And that can still cause confusion because it isn’t clear whether the hyphen is part of the URL or was added to hyphenate the paragraph.

According to the latest version of Text Module Level 3, this is possible with hyphen property’s ‘none’ value which is defined as meaning, “ Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities ”

CSS Text Level 3 does not define the exact rules for hyphenation or what a hyphenation opportunity is, but Unicode,org does, “ spaces and hyphens are used to determine breaks ” Unfortunately, hyphen: none will still break words at hyphens (an explicitly defined hyphenation opportunity) even though the spec says it shouldn’t.

I’m trying to fit long file names with:

overflow: hidden; text-overflow: ellipsis; width: 70%;

and it works good if the file names are consisted of letters, spaces or “_”, but if there is “-” word breaks in many lines and ellipsis is not implemented.

Is there a way to overcome that?

Thanks in advance :)

In Internet Explorer 11 and in Microsoft Edge 42.17134.1.0 , I have text 9999\XY5514Z to display in a div tag. Due to backslash “\” within the mentioned text, the text gets split into 9999 and XY5514Z. The same code works as expected in chrome and Firefox. I have word-break: normal; in css and expect to break complete “9999\XY5514Z” to next line and not all the text after “\”, if not enough space in the line where the word is rendered. In Internet Explorer 11 and in Microsoft Edge 42.17134.1.0, the result is displayed as 9999 and then remaining text on next line \XY5514Z. In Chrome and Firefox, the text is displayed as it is 9999\XY5514Z which is correct. I don’t want the word to break on “\” backslash in IE and Edge.

What about verylong emails like: [email protected] ?

Thanks! You helped me a lot

See also: the <wbr> tag.

MDN gives a thumb down to “word-break: break-word;”, but that fixed my problem where nothing else suggested here helped, until I added that to my paragraph styling.

Thank you, this has been very helpful. I struggled to have the URLs stay within the frame of my HTML emails. I added this CSS and worked like a charm. Thanks a lot!

thanks a lot :) , i was searching how to fix this for hours ! , in worpdress rtl with the english links breaks the page width , it seems the theme developer added only ” word-wrap: break-word; ” and it worked fine in firefox but not in chrome , so after adding overflow-wrap: break-word; it looks fine now.

Wow! Thanks a lot!! This solved my url overflow issue!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Server Restarted

My overflow: ellipsis is not working. Any help would be appreciated, here's my code snippet directly from my site, replaced long text with generic version:

<span style = "overflow: hidden; text-overflow: ellipsis;"><i>Here's a long line of text, should cut off on right hand side, by making 3 dots appear at the end when it reaches limit of parent element.</i></span>

To address the issue with text-overflow: ellipsis not working in a span, consider the span context and CSS properties. If the span is inside an element with display: flex , you might need to set a min-width on the span or its parent.

Ensure that span doesn't inherit an overflow property from its parent that could conflict with overflow: hidden . Here's a snippet illustrating setting a min-width.

To fix text-overflow 's ellipsis not showing up, follow these steps:

• Specify actual width of element, ellipsis doesn't work on auto-resizable elements like flex.
• Make sure other CSS styles or parent element is not overriding your element.
• Make sure your display is set to the value of block or inline-block .
• Include overflow: hidden in your HTML tag.
• Ensure to use the required white-space: nowrap property.
• See ellipsis examples below for divs, spans, tables, grids and flex containers.

Source: CSS text-overflow ellipsis not working

• Please be sure to read the question to understand it and answer the question that was asked. Be as detailed as possible in sharing your answer.
• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

How to fix CSS text-overflow: ellipsis; not working?

To fix CSS text-overflow: ellipsis; not working, we should apply the text-overflow style to an inline-block element.

For instance, we write

to make the a elements inline block with display: inline-block; .

Then we can apply the text-overflow: ellipsis; style.

CSS text-overflow: ellipsis; does not work properly or pushes d-flex content to max width

In my html structure I use Bootstrap flex and I faced a problem with text-overflow: ellipsis; and the classic way of making it.

What is text-overflow: ellipsis;? text-overflow: ellipsis; makes sure that if the sentence is longer than its block, it puts ... and makes sure that the sentence only takes up one line, rather than several. To make text overflow its container, you need to set other CSS properties: overflow and white-space.

The problem arose because my left column uses a variable width in flex, which fills up in proportion to the width of the opposite column. But my css class for text-overflow with white-space: nowrap; made the left column 100% in width and pushed col-md-3 behind it. The culprit was white-space: nowrap;, I can't quite explain how it inside another container can be allowed to push its parent frame, but it happened and the below fixed it.

My html structure frame. Inside each column is the content which does not determine the width of this parent frame itself, but is given a max width by its parent

Watch video of fix https://lennartc.dk/filer/CSS-text-overflow-ellipsis-fix_.mp4

Classic CSS class for ellipsis overflow that caused the error

Better procedure to ensure that overflow does not occur

hmm 🙄 My text gets cut off at the top, so I'm missing the ball above the Å ... If your CSS `line-height` is close to 1 and special characters like "Å" are cropped at the top, it's because of `overflow: "hidden"`. You can fix this by adding a bit of padding-top to your text. This trick creates a visual air at the top of the letters so they don't get cut off and you can maintain the line-height you prefer.