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
A brief discussion on order reconstruction: MySQL sharding
Table of contents 1. Objectives 2. Environmental ...
svg+css or js to create tick animation effect
Previously, my boss asked me to make a program th...
mysql 8.0.18 mgr installation and its switching function
1. System installation package yum -y install mak...
How to implement Mysql scheduled task backup data under Linux
Preface Backup is the basis of disaster recovery....
Vue computed properties
Table of contents 1. Basic Examples 2. Computed p...
What is BFC? How to clear floats using CSS pseudo elements
BFC Concept: The block formatting context is an i...
HTML form tag tutorial (1):
Forms are a major external form for implementing ...
How to set up FTP server in CentOS7
FTP is mainly used for file transfer, and is gene...
Solve the Linux Tensorflow2.0 installation problem
conda update conda pip install tf-nightly-gpu-2.0...
Detailed introduction to Mysql date query
Query the current date SELECT CURRENT_DATE(); SEL...
Detailed explanation of how to efficiently import multiple .sql files into MySQL
MySQL has multiple ways to import multiple .sql f...
Several common redirection connection example codes in html
Copy code The code is as follows: window.location...
Briefly talk about mysql left join inner join
Preface I have been busy developing a cold chain ...
Let's talk in detail about the props attributes of components in Vue
Table of contents Question 1: How are props used ...
How to use less in WeChat applet (optimal method)
Preface I am used to writing less/sass, but now I...