Is there a method to view text options that are too long within a fixed width <select multiple> HTML box?

Here is the code I am working with:

<div id='div2' style='height: 430px; width: 350px; overflow:auto;'>
<select multiple id="id" size="28" style="FONT-SIZE: 12px; FONT-FAMILY: Arial; width: 100%">

It's a challenge because I can't increase the width of the box beyond 350px, as per the requirements. Some text strings are longer than that and get truncated. I'm looking for a solution to either make these options wrap onto a second line or add a horizontal scroll bar so users can see the full content. This project is targeted for IE7 and 8.

htmlcssselect

Answer №1

To make text wrap in CSS, you can use the following code: word-wrap: break-word;

For cross-browser functionality, you can click here.

If you want to wrap text inside a select list, it may not be possible as far as I know.

One solution could be using a custom made select box like the jQuery Selectmenu, where you have full customization options for the look.

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 are some effective strategies to ensure my header is aligned properly on both mobile and desktop platforms?

While I'm more focused on back end web development, I've been struggling to make my header look good on both mobile and desktop without resorting to creating separate sites for each. This approach has proven to be cumbersome as maintaining two si ...

htmlcss

Tips on retrieving and refreshing dynamically generated PHP file echo output within a div

I have a div that I'm refreshing using jQuery every 10 seconds. The content is being read from a PHP file named status.php. Here is the JavaScript and HTML for the div: <script> function autoRefresh_div() { $("#ReloadThis").load("status.php ...

javascriptphphtmlajax

Is there a way to use CSS to make a div expand as much as it can?

I am attempting to accomplish the following; Do you think this is achievable? ...

htmlcss

Using the <script> attribute within the <head> tag without the async or defer attributes

https://i.stack.imgur.com/cRFaR.pngCurious about Reddit's use of the async or defer attribute in the script tag. Are there situations where blocking the parser is necessary? ...

javascripthtmlbrowser

Retrieving the Top 10 Values from a JSON Data Set

Take a look at this snippet from my JSON data. [ {"Element":"Water","Value":20}, {"Element":"Fire","Value":30}, {"Element":"Earth","Value":40}, {"Element":"Air","Value":50}, {"Element":"Spirit","Value":60}, {"Element":"Sun","Value":100}, { ...

javascripthtmlarraysjsonparsing

I am looking for a way to distinguish between mandatory and non-mandatory input fields in React

I've encountered an issue with the borders of the text fields in my React project. Here's how I want the text fields to look: https://i.stack.imgur.com/MP6DG.png Currently, the borders appear straight in the browser even though I want them rou ...

cssreactjsmaterial-ui

Stingray Riverbed SteelApp, showcasing an image on a maintenance landing page

We have implemented a feature on riverbed stingray that displays a maintenance page whenever the system administrator needs to update the application. In order to achieve this, we designed a custom HTML page with a logo image and uploaded both the .html an ...

htmlstingray

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

How can I retrieve text that is enclosed within 2 specific tags and then format the output according to my preference?

Is it possible to extract text between specific tags and format the output as desired? Are there any tools or scripts available for this task? For instance: [b]1.[/b] [artist]Norman Bass[/artist] – How U Like Bass? (Warp Brothers Club Mix) [i](3:26 ...

javascriptphpjqueryhtmltext

Is there a way to remove most HTML tags while retaining certain ones?

Looking for a solution to filter out all HTML codes from a PHP string except for: <p> <em> <small> The strip_tags() function is helpful, but it removes all HTML tags. Is there a way to specify that only the listed tags should be removed ...

phpregexstringhtml

What methods can be used to conceal a div when the content is not being shown?

I'm a beginner in HTML and CSS and I have a page with the following code: Content displayed : <div id="row-3" ><!-- Row 3 starts here --> <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/ ...

javascriptjqueryhtmlcss

Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Encountering a problem with browsers (potentially Chrome) adding CSS rules on touch-enabled devices. In a website developed for a client (specifically for Chrome), the scroll bars disappear on elements when accessed from their ultrabooks. The client still ...

htmlcssgoogle-chromebrowsertouch

Imagine a scenario where clicking on an image causes it to be rotated or

Could use some assistance figuring out what's missing here. I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser w ...

javascripthtmlcss

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

When the audio on the device is in use, the video will not play and vice versa

Whenever my video starts playing, the audio from my device (such as iPod or Spotify) stops. If I try to play the audio manually while the video is playing, the video freezes. Interestingly, when I tested playing an audio file directly within the app, it wo ...

javascripthtmlangularjsionic-framework

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid

Is it possible to absolutely position an element using its own bottom edge as a reference point?

Looking to achieve precise positioning of an element just off the top of the screen, specifically a sliding menu. Utilizing position: absolute and top: 0px is straightforward, but this aligns the element based on its top edge. Is there a way to achieve th ...

csscss-positionabsolute

The code written inside the <script> tag seems to be malfunctioning when placed in the component.html file within VScode while working with

I'm facing an issue where the script tag for jQuery included in index.html is not being executed within the component.html. There are no errors detected when inspected. Additionally, I have used another script for a toast message box. <script sr ...

javascripthtmlangularvisual-studio-code

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...

htmlcss

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

javahtmlseleniumxpathselenium-webdriver