선택 상자 옵션 너비 조절 방법
선택 상자 내의 옵션이 상자 너비를 벗어나면 어수선해질 수 있습니다. 그리고 다루기 힘든 외관. 이 문제를 해결하기 위해 CSS와 JavaScript를 모두 사용하여 옵션 너비를 사용자 정의하고 초과 텍스트를 잘라낼 수 있습니다.
CSS 접근 방식:
CSS만으로는 불가능하지만 옵션의 너비를 설정하기에 충분하므로 이를 활용하여 선택 상자 자체의 너비를 고정할 수 있습니다. 선택 요소의 너비를 설정하면 해당 경계 내에서 옵션이 제한됩니다. 또한 상자 너비를 초과하는 옵션을 숨기기 위해 오버플로하여 더 긴 옵션에 줄임표 효과를 적용할 수 있습니다.
<code class="css">select { width: 250px; } option { white-space: nowrap; text-overflow: ellipsis; }</code>
JavaScript 접근 방식:
옵션 너비를 더 세밀하게 제어하려면 JavaScript를 사용할 수 있습니다. 다음 코드 조각은 선택 상자의 너비와 일치하도록 옵션의 크기를 동적으로 조정하고 text-overflow를 사용하여 오버플로 텍스트를 자릅니다. 줄임표:
<code class="js">function shortString(selector) { const elements = document.querySelectorAll(selector); const tail = '...'; if (elements && elements.length) { for (const element of elements) { let text = element.innerText; if (element.hasAttribute('data-limit')) { if (text.length > element.dataset.limit) { element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`; } } else { throw Error('Cannot find attribute \'data-limit\''); } } } } window.onload = function() { shortString('.short'); };</code>
결합된 접근 방식:
CSS와 JavaScript 접근 방식을 결합하면 선택 상자 옵션의 너비와 오버플로 동작을 최적으로 제어할 수 있습니다. CSS 규칙은 선택 상자가 지정된 너비 내에 유지되도록 하는 반면, JavaScript 코드는 옵션의 너비를 동적으로 조정하고 초과 텍스트를 자릅니다.
위 내용은 다음은 질문 형식과 선택 상자 옵션 너비 제어에 대한 기사의 초점을 염두에 두고 몇 가지 제목 옵션입니다. **옵션 1(추가 기술):** * **Sele의 너비를 조절하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!