선택 상자 옵션의 너비를 제어하고 텍스트 줄임표를 구현하는 방법은 무엇입니까?

선택 상자 옵션의 너비 제어

HTML에서는 선택 요소와 하위 옵션 요소 모두에 스타일 속성을 적용하여 선택 상자 너비와 일치하도록 각 옵션의 너비를 지정할 수 있습니다. 그러나 CSS만으로는 이를 달성하는 것만으로는 충분하지 않을 수 있습니다.

한 가지 해결책은 JavaScript를 통합하여 옵션 너비를 추가로 제어하고 필요할 경우 텍스트 줄임표를 활성화하는 것입니다. 제공된 JavaScript 코드는 .short 클래스와 data-limit 속성이 있는 옵션 요소 내의 텍스트를 동적으로 조정하는 shortString 함수를 도입합니다.

이 솔루션을 구현하는 방법은 다음과 같습니다.

<code class="html"><!-- HTML -->
<select name="select" id="select">
  <option class="short" data-limit="37" value="Select your University">Select your University</option>
  <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select></code>

<code class="css"><!-- CSS -->
select {
  width: 250px;
}

option {
  width: 250px;
}</code>

<code class="js"><!-- JavaScript -->
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>

이 접근 방식을 사용하면 옵션 너비가 선택 상자 너비와 동일해지며 옵션 텍스트가 지정된 제한을 초과하는 경우 초과 텍스트가 줄임표로 대체됩니다.

위 내용은 선택 상자 옵션의 너비를 제어하고 텍스트 줄임표를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!