HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦

這篇文章主要介紹了HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站長期為上1000+客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為灌云企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站制作，灌云網(wǎng)站改版等技術服務。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

HTML中的select下拉框中的內(nèi)容過長，導致部分被覆蓋了，試了各種方法，都沒有頭緒，最終在option中加title這個屬性，發(fā)現(xiàn)問題迎刃而解今天，我遇到這樣一個問題：查詢欄中的下拉框中的內(nèi)容過長，導致部分被覆蓋了。
查詢了一些資料，有的說用函數(shù)控制，有的說用事件控制，有的看不懂，有的實現(xiàn)起來太復雜了。后來，問了一下同事，有沒有一些簡單的方法，他告訴我在option中加title這個屬性，于是按照他的方法試試，終于發(fā)現(xiàn)這個辦法可行。這樣，我就想記錄下來，避免自己給忘記了。
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下拉框內(nèi)容顯示不全的解決辦法</title> 
<style type="text/css"> 
#area option{ 
width:140px; 
} 
</style> 
</head> 
<body style="width:80%; height:100px; text-align:center;"> 
<p id="p_select"> 
<label for="area">字母：</label> 
<select id="area" name="area" style="width:150px;"> 
<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> 
</p> 
</body> 
</html>

2、實例結(jié)果

HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦
3、動態(tài)數(shù)據(jù)

代碼如下:

<p id="p_select"> 
<label for="area">省份：</label> 
<select id="area" name="area" style="width:150px;"> 
<option value="0">全部</option> 
<c:forEach items="${list}" var="area"> 
<option value="${area.areaCode}" title="${area.areaName}">${area.areaName}</option> 
</c:forEach> 
</select> 
</p>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

分享名稱：HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦
標題網(wǎng)址：http://newbst.com/article22/jhcicc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、企業(yè)建站、網(wǎng)站維護、網(wǎng)站設計公司、Google、自適應網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

HTML中select下拉框內(nèi)容顯示不全部分被覆蓋怎么辦