Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

Today, I encountered a problem: the content in the drop-down box in the query bar was too long, causing part of it to be covered.

I looked up some information, some said to use function control, some said to use event control, some I couldn't understand, and some were too complicated to implement. Later, I asked a colleague if there were some simple methods. He told me to add the title attribute in the option. So I tried his method and finally found that this method works. So, I want to write it down to avoid forgetting it.

1. The specific examples are as follows

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Solution to incomplete display of select drop-down box content in HTML</title>
<style type="text/css">
#area option{
width:140px;
}
</style>
</head>
<body style="width:80%; height:100px; text-align:center;">
<div id="div_select">
<label for="area">Letters:</label>
<select id="area" name="area" style="width:150px;">
<option value="0">All</option>
<option value="1" title="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCCCC">CCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG">GGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHH">HHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIII">IIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</select>
</div>
</body>
</html>

2. Example Results

3. Dynamic Data

Copy code

The code is as follows:

<div id="div_select">
<label for="area">Province:</label>
<select id="area" name="area" style="width:150px;">
<option value="0">All</option>
<c:forEach items="${list}" var="area">
<option value="${area.areaCode}" title="${area.areaName}">${area.areaName}</option>
</c:forEach>
</select>
</div>

<<: The concrete implementation of JavaScript exclusive thinking

>>: Implementation of MySQL Shell import_table data import

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

Combining XML and CSS styles

Complete steps for Docker to pull images

MySQL transaction details

Why is your like statement not indexed?

How to use Vue to implement CSS transitions and animations

Thoroughly understand JavaScript prototype and prototype chain

Summary of common Linux distribution mirror source configuration

Vue component to realize carousel animation

Will the deprecated Docker be replaced by Podman?

Solution to mysql server 5.5 connection failure

Recommend

A brief discussion on JavaScript scope

Use pure CSS to achieve switch effect

Detailed explanation of the this pointing problem of JavaScript prototype objects

Pros and Cons of Vite and Vue CLI

A small question about the execution order of SQL in MySQL

How to install MySQL 8.0.17 and configure remote access

A brief discussion on the calculation method of key_len in mysql explain

Solution to Ubuntu not being able to connect to the Internet

Interpreting MySQL client and server protocols

Understand CSS3 FlexBox elastic layout in 10 minutes

JS native 2048 game source code sharing (the latest on the Internet)

Various methods to implement the prompt function of text box in html

JD Vue3 component library supports the detailed process of mini program development

MySQL 5.7.18 Installer installation download graphic tutorial

Detailed explanation of using grep command in Linux