선택 상자 옵션의 너비를 제어하고 JavaScript를 사용하여 텍스트 오버플로 줄임표를 구현하려면 어떻게 해야 합니까?

선택 상자 옵션의 너비 제어

선택 상자에서 옵션이 상자 자체보다 시각적으로 넓어서 정렬이 잘못되었습니다. 이 문제를 해결하려면 옵션의 너비를 상자의 너비와 동일하게 설정하는 것이 좋습니다. 또한 긴 텍스트가 있는 옵션에 대해 텍스트 오버플로 줄임표를 구현하려고 합니다.

기존 CSS 접근 방식

처음에는 CSS를 사용하여 솔루션을 시도했지만 소용없었습니다. CSS만으로는 선택 상자 내 옵션의 너비를 직접 제어할 수 있는 수단을 제공하지 않습니다.

JavaScript 개입

CSS는 솔루션을 제공할 수 없으므로 귀하는 JavaScript의 대안. 귀하가 제공한 JavaScript 코드는 선택 상자 내 옵션의 텍스트 너비를 성공적으로 수정했습니다. 각 옵션 요소를 반복하고 필요한 경우 내부 텍스트를 수정하는 방식으로 작동합니다.

HTML 및 CSS 수정

HTML에서 data-limit 속성을 다음에 추가했습니다. 각 옵션 요소는 허용되는 최대 텍스트 길이를 지정합니다. CSS에서 선택 상자와 옵션 모두에 대해 250px의 고정 너비를 설정합니다.

코드 스니펫

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

데모

이 스크립트를 실행하면 지정된 제한보다 긴 텍스트 길이가 있는 옵션은 선택 항목 내에 맞도록 줄임표로 잘립니다. 상자 너비.

위 내용은 선택 상자 옵션의 너비를 제어하고 JavaScript를 사용하여 텍스트 오버플로 줄임표를 구현하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!