선택 상자 옵션의 너비 설정

주어진 HTML 코드에서 선택 상자 옵션의 너비가 선택 상자의 너비를 초과합니다. 상자 자체. 이 문제를 해결하고 옵션 너비가 선택 상자 너비와 일치하는지 확인하려면 CSS 스타일을 적용해 보겠습니다.

CSS 솔루션:

select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

선택 상자와 해당 옵션의 너비를 모두 250px로 설정하여 원하는 너비를 적용합니다. 또한 옵션 범위를 벗어나는 텍스트를 숨기기 위해 Overflow: Hidden 속성을 적용하여 텍스트가 선택 상자를 넘치지 않도록 합니다.

참고: 그러나 CSS는 솔루션은 렌더링 엔진의 잠재적인 차이로 인해 옵션 너비를 모든 브라우저에서 선택 상자의 정확한 크기로 완전히 제한하지 못할 수 있습니다.

Javascript 솔루션:

또는 지정된 제한에 따라 옵션 너비를 동적으로 조정하기 위해 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');
};

이 함수를 사용하면 data-limit 속성을 사용하여 각 옵션의 너비 제한을 정의할 수 있습니다. 제한을 초과하는 옵션은 잘리고 줄임표(...)가 접미사로 붙습니다.