HTML의 선택 드롭다운 상자 내용이 완전히 표시되지 않고 부분적으로 가려지는 문제에 대한 해결 방법에 대한 자세한 설명
- 高洛峰원래의
- 2018-05-19 09:10:364610검색
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. 예시 결과
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 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.