선택 상자 옵션의 너비 제어

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

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

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

Select your UniversityBangladesh University of Engineering and TechnologyMawlana Bhashani Science and Technology University

select {
  width: 250px;
}

option {
  width: 250px;
}

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');
};

이 접근 방식은 옵션 너비가 선택 상자 너비와 동일하도록 보장하며 옵션 텍스트가 지정된 제한을 초과하면 초과 텍스트가 줄임표로 대체됩니다.