문제
나는이 <select>그 중 한 곳 <option>의 텍스트 값이 매우 깁니다. <select>표시된 텍스트를 잘라 내야하더라도 크기를 조정하여 부모보다 넓지 않게 하고 싶습니다 . max-width: 100%그렇게해야합니다.
크기를 조정하기 전에 :
크기 조정 후 원하는 것 :
그러나이 jsFiddle 예제 를 로드 하고 결과 패널의 너비를의 너비보다 작게 조정하면 <select>내부의 선택 영역 <fieldset>이 너비를 축소하지 못하는 것을 알 수 있습니다 .
크기 조정 후 실제로보고있는 것 :
그러나 대신 대신 페이지<div><fieldset> 가 확장됩니다. 한 페이지에 a 와 서로 옆에 있으면 변경 사항을보다 쉽게 테스트 하고 확인할 수 있습니다 . 주변 태그 를 삭제 하면 크기 조정이 작동합니다. 태그는 어떻게 든 수평 크기 조정 휴식 원인이된다.<fieldset><div><fieldset><fieldset>
<fieldset>CSS 규칙이있는 것처럼 행동이다 fieldset { min-width: min-content; }. ( min-content대략 아이가 오버플로하지 않는 가장 작은 너비를 의미합니다.) <fieldset>with를 <div>withmin-width: min-content 로 바꾸면 정확히 동일하게 보입니다. 그러나 min-content내 스타일, 브라우저 기본 스타일 시트 또는 Firebug의 CSS 검사기 에는 규칙이 없습니다 . <fieldset>Firebug의 CSS Inspector 및 Firefox의 기본 스타일 시트 forms.css 에서 볼 수있는 모든 스타일을 재정의하려고 시도했지만 도움이되지 않았습니다. 특히 재정의 min-width하고 width아무것도하지 않았습니다.
암호
필드 셋의 HTML :
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>작동하지만 작동하지 않는 CSS :
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}width속성을 기본값으로 재설정하면 아무것도 수행되지 않습니다.
fieldset {
width: auto;
min-width: 0;
max-width: none;
}/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}자세한 내용은
이 문제는 보다 포괄적이고 복잡한 jsFiddle 예제 에서도 발생하며 실제로 수정하려는 웹 페이지와 더 유사합니다. <select>인라인 블록의 div크기를 조정하지 못하는 것도 문제가 아님 을 알 수 있습니다 . 이 예제는 더 복잡하지만 위의 간단한 경우에 대한 수정도이 더 복잡한 경우를 수정한다고 가정합니다.
[편집 : 아래의 브라우저 지원 정보를 참조하십시오.]
이 문제에 대한 한 가지 궁금한 점은 을 설정하면div.wrapper { width: 50%; }<fieldset> 그 시점에서 자체 크기 조정 이 중지되고 전체 크기 <select>가 뷰포트의 가장자리에 도달했을 것입니다. (가) 것처럼 크기 조정이 발생 <select>가지고 width: 100%도 불구하고, <select>그것을 가지고처럼 보인다 width: 50%.
당신 이 <select>스스로width: 50% 를 주면 그 행동은 일어나지 않습니다. 너비가 정확하게 설정되었습니다.
그 차이의 이유를 이해하지 못합니다. 그러나 관련이 없을 수 있습니다.
또한 HTML 필드 셋을 통해 아이들이 무한정 확장 할 수 있는 매우 유사한 질문을 발견했습니다 . asker가 솔루션을 찾지 못해 를 제거하는 것 외에는 솔루션이 없다고 생각 합니다 <fieldset>. 그러나 <fieldset>디스플레이를 제대로 만드는 것이 실제로 불가능하다면 왜 그런지 궁금합니다. 무엇에서 <fieldset>의 사양 또는 기본 CSS ( 이 질문의 등은 )이 문제의 원인은? 이 특수 동작은 여러 브라우저가 이와 같이 작동하기 때문에 어딘가에 문서화되어 있습니다.
배경 목표 및 요구 사항
내가 이것을하려고하는 이유는 큰 형태의 기존 페이지에 모바일 스타일을 작성하는 것의 일부입니다. 양식에는 여러 섹션이 있으며 그 중 일부는에 싸여 <fieldset>있습니다. 스마트 폰 (또는 브라우저 창을 작게 만드는 경우)이있는 페이지 부분은 <fieldset>나머지 양식보다 훨씬 넓습니다. 대부분의 폼은 너비를 제한하지만, 섹션이 <fieldset>그렇지 않으면 사용자가 축소하거나 오른쪽으로 스크롤하여 해당 섹션을 모두 볼 수 있습니다.
<fieldset>큰 앱의 많은 페이지에서 생성되기 때문에 단순히을 제거하는 것이 중요합니다 .CSS 또는 JavaScript의 선택기가 어떤 앱에 의존하는지 확실하지 않습니다.
필요한 경우 JavaScript를 사용할 수 있으며 JavaScript 솔루션은 아무것도 아닌 것보다 낫습니다. 그러나 JavaScript가 이것을 수행하는 유일한 방법이라면 CSS와 HTML만으로는 이것이 불가능한 이유에 대한 설명을 듣고 싶습니다.
편집 : 브라우저 지원
사이트에서 Internet Explorer 8 이상 (IE7 지원 중단), 최신 Firefox 및 최신 Chrome을 지원해야합니다. 이 특정 페이지는 iOS 및 Android 스마트 폰에서도 작동합니다. Internet Explorer 8에서는 약간 저하되었지만 여전히 사용 가능한 동작이 허용됩니다.
다른 브라우저에서 깨진 fieldset예제 를 다시 테스트했습니다 . 실제로 다음 브라우저에서 이미 작동합니다.
- Internet Explorer 8, 9 및 10
- 크롬
- Android 용 Chrome
다음과 같은 브라우저에서 작동합니다.
- Firefox
- 안드로이드 용 Firefox
- 인터넷 익스플로러 7
따라서 현재 코드가 침입하는 것에 관심이있는 유일한 브라우저는 Firefox입니다 (데스크톱 및 모바일 모두). 코드가 수정되어 다른 브라우저에서 코드를 중단하지 않고 Firefox에서 작동하면 문제가 해결됩니다.
이 사이트의 HTML 템플릿은 클래스를 추가하는 인터넷 익스플로러 조건부 주석을 사용 .ie8하고 .oldie받는 <html>요소입니다. IE의 스타일 차이를 해결해야하는 경우 CSS에서 해당 클래스를 사용할 수 있습니다. 추가 된 클래스는 이 이전 버전의 HTML5 Boilerplate 과 동일 합니다.
<fieldset>(또는 div.wrapper) select { width:100% }. max-width부모의 원래 너비 의 일부를 요소의 원래 너비 의 일부로 제공 한 다음 크기를 조정하지 않고 width부모와 함께 크기를 조정합니다. 나는 그것이 당신이 원하는 것을 할 것이라고 생각합니다 (그러나 나는 오해했을 수 있습니다). 더 복잡한 바이올린에서 왼쪽 열의 필드에 % 너비와 최소 픽셀 너비를 지정하십시오. 그런 다음 오른쪽에 100-(왼쪽 필드-%-폭) % 너비의 필드를 제공하십시오.