The CSS property text-overflow: ellipsis; behaves correctly in Firefox, however, it is not functioning properly in the dropdown lists of Google Chrome and Opera browsers

Is there a way to limit the text length in dropdown list options using HTML and CSS? I've tried the following code snippet, which works fine in Firefox but doesn't seem to work in Google Chrome and Opera browsers.

<div class="select">
 <select name="option[1381]" id="input-option1381" class="form-control ">
  <option value=""> --- Please Select --- </option>
  <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip  (+$1.50)</option>
  <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option>
 </select>
</div>

<style type="text/css">
.select select {
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

I'm puzzled by why it's not working in Opera and Chrome. Can anyone offer some insight into this issue?

htmlcssgoogle-chrome

Answer №1

Applying text-overflow:ellipsis; to <select> elements or their <option>s is not a reliable solution. To solve this issue, I added extra padding-right to prevent the text from overlapping with the arrow icon. By doing so, the text remains within its designated area and the problem is resolved!

<div class="custom-select">
 <select name="option[1381]" id="input-option1381" class="form-control ">
  <option value=""> --- Please Select --- </option>
  <option value="5051" data-engraving="Checkered Clipboard Clip"> Checkered Clipboard Clip  (+$1.50)</option>
  <option value="5050" data-engraving="Blackout Clipboard Clip"> Blackout Clipboard Clip (+$1.50)</option>
 </select>
</div>

<style type="text/css">
.custom-select select {
  padding-right:35px;
}
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for altering the text color of a concealed <option> element?

Is there a way to change the text color of a hidden option in select dropdowns? I want the hidden option to display as a placeholder text, not selectable, and have its text displayed in red. However, I don't want the placeholder text to appear as an a ...

htmlcsscss-selectorshtml-select

Options chosen will vanish in a multi-select drop-down tag with a scroll bar in HTML

I need assistance with my multiple drop-down select tag issue. .CustomStyle { overflow-x: scroll; width: 16%; } <select multiple size="5" class="CustomStyle"> <option>Option 1</option> <option>Option 2</option> &l ...

javascripthtmlcss

Modify visibility or enable state of a text box according to a checkbox in PHP

Currently, I am utilizing PHP to exhibit a vertical list of numbered checkboxes, with one checkbox for each day in a specific month. Next to every checkbox, there is a text box where users can input optional notes for the selected day. To ensure that users ...

javascriptphpjquerycsscheckbox

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

javascriptjquerycssfirefoxscroll

Animating the background of a div element using jQuery

I am facing an issue with the code snippet below that I have written. It doesn't seem to be working as expected and I'm curious if anyone knows why. The problem is that I have set a background color on the DIV, but when hovering over it, I want ...

jqueryhtmlcss

What is the reason behind padding increasing the apparent width of an element, despite having box-sizing set to border-box?

While working with Semantic-ui, I encountered an issue with toggle boxes placed next to each other in a flexbox container. When the window size is reduced, the boxes wrap around so that one is positioned on top of the other. To create some spacing between ...

htmlpaddingcss

Attempting to embed a Java applet into an HTML document

Here is how the directory looks: test.html blah hmmm In the "blah" directory, we have all the applet files, including blahBlah.class. In the "hmmm" directory, there are additional class files taken from a library or similar source that are also used by t ...

javahtmlappletlocalhost

Eliminate any space from the navigation bar on my website

I just started learning HTML and I'm struggling with some whitespace issues on my navigation bar. Can anyone help me figure out what's causing it? div.nav { background-color: black; color: white; font-size: 20px; font-weight: bold; ...

htmlcsshtml-listswhitespacenav

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned. The width of the column should be flexible, expanding to accommodate long numbers in ...

htmlcsshtml-tablealignmentdecimal

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

htmlcolorsjasper-reportsireport

Retrieve the concealed division element's HTML content along with its formatting

Help needed with appending a hidden div with its styles intact. Despite using the code provided below, the appended div does not retain its styles. Any suggestions for an alternative method? var warningMessage = $('#warningDiv').html() fun ...

javascriptjqueryhtmlcss

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

Is there a way to ensure that the navigation bar only appears at the top of the page?

Is there a way to only show the navigation bar when a user scrolls to the very top of the page? Currently, the nav bar appears whenever the user scrolls up, regardless of the screen position. Html <header class="nav-down"> <div> navigation ...

javascriptjqueryhtmlcssnavigation

What could be the reason for the order property failing to function on divs within a block container?

I have a single container with the CSS property display: block. Inside this container, there are 3 div elements. I attempted to order them as per my code, but it proved to be impossible due to the fact that the container itself is styled as display: block ...

htmlcssflexbox

[Web Development]:

Having an issue with my HTML file where a JavaScript function named "CheckCaptcha" is not being executed when an image is clicked. I've been working on the code for hours, trying different tweaks and modifications, but it still can't seem to find ...

javascripthtml

Conceal the navbar during the process of the ajax loader loading

My current issue involves utilizing an AJAX loader to conceal my page until all elements have loaded. Unfortunately, the navbar is not hidden along with the other content as shown in the image below. I need assistance in ensuring that everything, including ...

javascriptjqueryhtmlajax

Tips for submitting AJAX information instead of traditional form data

I am trying to send a simple input field as JSON data to a web server that I have set up. Here is what I have tried so far: <html> <head> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <script> $(document).r ...

javascriptjqueryhtmlajax

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

Ensuring the accuracy of user input

Can someone assist me with comparing two dates in JSP? I need validation that alerts the user when a future date is entered. The start date or end date should not be in the future. The date format is 12-5-2011 10:51:49. Any help would be greatly apprecia ...

javascripthtmljspvalidation

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

Looking to transform a div with the transform: scale(-1,1) property while using background-clip: text on the text within it. However, this causes the text to disappear. Here's what I've attempted: .reverse { transform: scale(-1, 1); } .gr ...

javascripthtmlcss