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

How to modify the master-slave replication options in MySQL online

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

How to modify the master-slave replication options in MySQL online

Sample code for flask and vue front-end and back-end separation project deployment

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

FastDFS and Nginx integration to achieve code analysis

Front-end JavaScript housekeeper package.json

About the correct way to convert time in js when importing excel

Detailed explanation of the execution plan explain command example in MySQL

Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML

Analysis of the implementation process of Nginx high availability solution in production environment

How to implement a multi-terminal bridging platform based on websocket in JS

Recommend

Pure CSS to achieve automatic rotation effect of carousel banner

12 Javascript table controls (DataGrid) are sorted out

The specific implementation of div not automatically wrapping and forcing not wrapping in html

How to use Navicat to operate MySQL

Reasons why MySQL 8.0 statistics are inaccurate

WeChat applet custom scroll-view example code

Use node-media-server to build a simple streaming media server

How to quickly return to the top from the bottom when there is too much content on the web page

CSS3 implementation example of rotating only the background image 180 degrees

When Navicat connects to MySQL, it reports 10060, 1045 errors and the location of my.ini

Detailed explanation of js's event loop event queue in the browser

Div nested html without iframe

Sql query MySql database table name and description table field (column) information

MySQL full-text search usage examples

The difference between name and value in input tag