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

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

Recommend

Detailed explanation of log processing of Docker containers

Docker has many log plug-ins. The default is to u...

MySQL/MariaDB Root Password Reset Tutorial

Preface Forgotten passwords are a problem we ofte...

Examples of preview functions for various types of files in vue3

Table of contents Preface 1. Preview of office do...

Let's learn about the MySQL storage engine

Table of contents Preface 1. MySQL main storage e...

MySQL 8.0.17 installation and simple configuration tutorial under macOS

If you don’t understand what I wrote, there may b...

MySQL-8.0.26 Configuration Graphics Tutorial

Preface: Recently, the company project changed th...

Vue3+Element+Ts implements basic search reset and other functions of the form

After switching from Vue2's writing style to ...

Detailed explanation of two table copy statements: SELECT INTO and INSERT INTO SELECT (Differences between SQL database and Oracle database)

1. INSERT INTO SELECT statement The statement for...

Comparison of the use of form element attributes readonly and disabled

1) Scope of application: readonly:input[type="...

VM VirtualBox virtual machine mount shared folder

One environment Install VMware Tools on CentOS 7 ...

Detailed steps for Spring Boot packaging and uploading to Docker repository

Important note: Before studying this article, you...

A method of hiding processes under Linux and the pitfalls encountered

Preface 1. The tools used in this article can be ...

Sample code for deploying ELK using Docker-compose

environment Host IP 192.168.0.9 Docker version 19...

Vue implements a small countdown function

Countdown function needs to be implemented in man...

How to install MySQL 5.7 from source code in CentOS 7 environment

This article describes how to install MySQL 5.7 f...