Ellipsis for overflow text in dropdown boxes

css

responsive-design

best-practices

pseudo-elements

byNikita Barsukov·Oct 21, 2024

Easily implement an ellipsis for overflow text in dropdown boxes with CSS. Apply text-overflow: ellipsis to both select and option. Set white-space: nowrap and overflow: hidden to prevent text wrapping and enable the ellipsis when text overflows. Keep in mind, dropdown styles vary across browsers, meaning they might not look identical everywhere.

select, select option {
  width: 150px; /* Adjust width as suitable for your project */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

For browsers that don't support text-overflow: ellipsis, don't panic! You can use padding to prevent text overlap. This solution is like your spare tire - not the best, but it'll get you to the next gas station!

What happens in browsers that don't support ellipsis?

Here's the thing: Chrome decided to join the text-overflow: ellipsis party in <select> elements only in July 2020. So, when dealing with older versions or different browsers, you need a back-up plan. This is where padding comes to the rescue. It's like the comforting auntie of CSS, smoothing things over when all else fails.

Going JavaScript-free

Look, not all projects need (or want) to heavily depend on JavaScript. Sometimes you want to travel light. In these cases, libraries like Chosen offer a way to customize native <select> elements without adding hefty JavaScript.

One common CSS trick is to remove the default dropdown arrow for a cleaner look. It's like giving your dropdown a tidy trim.

Who doesn't love a good makeover? The border-style and background properties let you reframe your dropdown to your liking, just like that fancy Instagram filter that brings out the blue in your eyes.

Truncating strings in the backend

When the frontend gives you headaches, sometimes it's best to retreat to the backend. Here, you can implement consistent text truncation by limiting text length beforehand.

Dynamically updating dropdowns with JavaScript

If you want to add a bit of magic to your user's experiences, JavaScript's select.addEventListener lets you update dropdown content based on user actions. Remember, with great power comes great responsibility!

Using pseudo-elements for advanced styling

To truly wield the power of CSS, one must master the art of pseudo-elements. The ::before pseudo-element can add an ellipsis without calling upon the forces of JavaScript.pointer-events further ensures that the dropdown operates without hiccups due to overlapping elements.

Text length adjustments based on selection

Imagine adjusting the container content based on the selected option. The dataset attribute coupled with JavaScript makes this possible and truly dynamic.

Utilizing CSS properties

Let's dive into lesser-known waters of CSS, where we can create our own ripple effects.

Using padding for hiding overflow text

Right padding can come in handy when battling text overlap in browsers that don't ride the text-overflow: ellipsis wave. Don't believe me? See it for yourself:

select {
  -webkit-padding-end: 25px; /* Yes, it's weird, but iOS seems to like it */
  padding-right: 25px; /* Experiment until it looks just right */
}

Remember, use -webkit-padding-start and -webkit-padding-end for proper viewport experience in iOS.

Beautifying with border and background

Here's a fun fact: Your dropdown box can wear makeup too. Style the border and background to put on a show for your audience:

select {
  border: 1px solid #000;  /* Feel free to choose your own adventure */
  background-color: #fff;  /* It's like a blank canvas, paint away! */
}

Backend handling of text length

Let's bring in the big guns for consistent appearance across all clients. Who needs CSS when you can talk directly to the server?

truncate("String that overflows like the Niagara Falls", length: 25)  /* From Niagara to a calm stream */

Dynamically updating content with JavaScript

Here’s a secret: CSS isn’t the only styling hero in the neighborhood. JavaScript can also step in when things get thorny:

document.querySelector('select').addEventListener('change', function() {
  this.setAttribute('data-content', this.options[this.selectedIndex].text);
  // Voila! Your dropdown just became an artist, changing its own content on the fly!
});