HTML의 선택 드롭다운 상자 내용이 완전히 표시되지 않고 부분적으로 가려지는 문제에 대한 해결 방법에 대한 자세한 설명-HTML 튜토리얼-php.cn

HTML의 선택 드롭다운 상자 내용이 완전히 표시되지 않고 부분적으로 가려지는 문제에 대한 해결 방법에 대한 자세한 설명

高洛峰

풀어 주다： 2018-05-19 09:10:36

원래의

4596명이 탐색했습니다.

HTML의 선택 드롭다운 상자에 있는 내용이 너무 길어서 일부가 가려졌습니다. 다양한 방법을 시도해 보았지만 결국에는 제목 속성을 옵션에 추가하여 문제를 발견했습니다. 해결되었습니다. 오늘 저는 쿼리 열의 드롭다운 상자에 있는 내용이 너무 길어 일부가 가려지는 문제에 직면했습니다.
정보를 찾아보니 어떤 사람은 기능 제어를 쓴다고 하고, 어떤 사람은 이벤트 제어를 쓴다고 하고, 어떤 사람은 이해가 안 되고, 어떤 사람은 구현하기 너무 복잡하다고 하더군요. 나중에 동료에게 간단한 방법이 없냐고 물었더니 옵션에 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 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. 예시 결과

HTML의 선택 드롭다운 상자 내용이 완전히 표시되지 않고 부분적으로 가려지는 문제에 대한 해결 방법에 대한 자세한 설명
3 .동적 데이터

코드는 다음과 같습니다.

<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의 선택 드롭다운 상자 내용이 완전하지 않은 문제에 대한 자세한 해결 방법은 다음과 같습니다. 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!