HTML中select下拉框內容顯示不全部分被覆蓋的解決

2020-03-22 19:38:26

字體：大中小

來源：轉載

供稿：網友

今天，我遇到這樣一個問題：查詢欄中的下拉框中的內容過長，導致部分被覆蓋了。

查詢了一些資料，有的說用函數控制，有的說用事件控制，有的看不懂，有的實現起來太復雜了。后來，問了一下同事，有沒有一些簡單的方法，他告訴我在option中加title這個屬性，于是按照他的方法試試，終于發現這個辦法可行。這樣，我就想記錄下來，避免自己給忘記了。

1、具體實例如下

復制代碼代碼如下:
!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 HTML中的select下拉框內容顯示不全的解決辦法 /title
style type="text/css"
#area option{
width:140px;
}
/style
/head
body
div id="div_select"
label for="area" 字母： /label
select id="area" name="area"
option value="0" 全部 /option
option value="1" title="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA /option
option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB" BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB /option
option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC" CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC /option
option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD" DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD /option
option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE" EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE /option
option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF" FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF /option
option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG" GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG /option
option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH" HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH /option
option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIII" IIIIIIIIIIIIIIIIIIIIIIIIIIIIII /option
/select
/div
/body
/html

2、實例結果

3、動態數據

復制代碼代碼如下:
div id="div_select"
label for="area" 省份： /label
select id="area" name="area"
option value="0" 全部 /option
c:forEach items="${list}" var="area"
option value="${area.areaCode}" title="${area.areaName}" ${area.areaName} /option
/c:forEach
/select
/div
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html會動的小狗狗源碼

下一篇：什么是HTML語義化？html語義化的好處（總結）