HTML 선택 드롭다운에서 넘쳐나는 텍스트를 어떻게 처리할 수 있나요?

드롭다운 상자에서 넘치는 텍스트에 대한 줄임표

웹 개발 영역에서 드롭다운 상자에서 넘치는 텍스트를 관리하는 것은 지속적인 문제가 될 수 있습니다. text-overflow:ellipsis 속성은 일반적으로 div와 같은 다른 요소에서 텍스트를 자르는 데 사용되지만

그러나 2020년 7월부터 획기적인 발전이 이루어졌습니다. 이제 Chrome은

에 대해 text-overflow:ellipsis를 지원합니다. 강요. 즉, 브라우저는 드롭다운 상자의 너비를 초과하는 모든 옵션 텍스트를 자동으로 자르고 텍스트가 잘렸음을 나타내기 위해 줄임표를 추가합니다.

대체 솔루션

최근 업데이트 이전에는 에서 텍스트를 자르는 옵션이 제한되어 있었습니다. JavaScript를 사용하지 않고 요소를 사용합니다. text-overflow:ellipsis와 함께 Overflow:hidden 및 white-space:nowrap 속성을 사용하는 것과 관련된 한 가지 해결 방법이 있습니다. 안타깝게도 이 접근 방식은 모든 브라우저에서 일관되게 작동하지 않았습니다.

또 다른 대안은 Chosen과 같은 사용자 정의 가능한 대체 라이브러리를 사용하는 것이었습니다. 이러한 라이브러리는 기본 HTML 양식 컨트롤 기능 이상의 특정 요구 사항을 충족하도록 스타일을 지정하고 사용자 정의할 수 있는 드롭다운을 제공합니다.

향후 개발 및 버그 보고

Chrome에서는

에서 향상된 텍스트 오버플로 처리 방법 요소를 사용하는 경우 다른 브라우저가 즉시 따르지 않을 수 있다는 점에 유의하는 것이 중요합니다. 일관된 지원이 부족하여 괴로울 경우 다음 두 가지 옵션이 있습니다.

• 해당 운영 체제 또는 브라우저에 대해 버그 보고서를 제출하고 에 대한 text-overflow:ellipsis 채택을 옹호합니다. 요소.
  드롭다운 상자 모양에 대한 더 많은 유연성과 제어 기능을 제공하는 Chosen과 같은 사용자 정의 가능한 대체 라이브러리를 선택하십시오.

  계속해서 인식을 높이고 대체 솔루션을 탐색함으로써 우리는 다음을 수행할 수 있습니다. 웹 양식 디자인의 발전에 기여하고 모두를 위한 더욱 원활한 사용자 경험을 보장합니다.

  위 내용은 HTML 선택 드롭다운에서 넘쳐나는 텍스트를 어떻게 처리할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

  원천：php.cn
  이전 기사：내 웹페이지에 지속적인 세로 스크롤 막대가 표시되도록 하려면 어떻게 해야 합니까? 다음 기사：`h3:nth-child(1):contains(\'a\')`가 작동하지 않는 이유는 무엇이며 대안은 무엇입니까?
  본 웹사이트의 성명

  본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
  저자별 최신 기사

  • IIFE(즉시 호출 함수 표현식)를 JavaScript의 한 줄에서 정의하고 호출해야 하는 이유는 무엇입니까?
    2024-12-04 15:29:15
  • 데이터 부족 및 중지 단어로 인해 MySQL 전체 텍스트 검색이 실패하는 이유는 무엇입니까?
    2024-12-04 15:28:12
  • wkhtmltopdf를 사용하여 PDF로 변환할 때 HTML 테이블 내에서 페이지 나누기를 방지하려면 어떻게 해야 합니까?
    2024-12-04 15:27:11
  • StringTokenizer는 Java에서 실제로 더 이상 사용되지 않습니까?
    2024-12-04 15:26:11
  • 내 Python MySQL 데이터베이스 업데이트가 반영되지 않는 이유는 무엇입니까?
    2024-12-04 15:25:15
  • HTML에서 긴 텍스트가 컨테이너를 넘치지 않도록 하려면 어떻게 해야 합니까?
    2024-12-04 15:24:11
  • 단일 쿼리로 MySQL 테이블에 여러 행을 삽입하려면 어떻게 해야 합니까?
    2024-12-04 15:23:12
  • FastAPI 백엔드에 대용량 파일(≥3GB)을 효과적으로 업로드하는 방법은 무엇입니까?
    2024-12-04 15:22:11
  • Python에서 Selenium의 더 이상 사용되지 않는 `executable_path`를 수정하는 방법은 무엇입니까?
    2024-12-04 15:21:16
  • pysftp 또는 Paramiko를 사용할 때 SSH 호스트 키를 올바르게 확인하려면 어떻게 해야 합니까?
    2024-12-04 15:20:12
  최신 이슈

  function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

  에서 2024-04-29 11:01:01

  0

  3

  2076

  Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

  에서 2024-04-23 00:22:19

  0

  11

  2238

  자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

  에서 2024-04-19 15:37:47

  0

  1

  1883

  상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

  에서 2024-04-18 23:52:34

  0

  1

  1765

  CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

  에서 2024-04-16 10:10:18

  0

  0

  1799
  관련 주제

  더>

  • 와이파이 비밀번호
  • mysql 예외 솔루션
  • BTC 코인 최신 뉴스
  • nginx 구성에 대한 자세한 설명
  • phpstudy를 열 수 없는 이유
  • 4GB 준비
  • 파일 이름에 불법적인 내용이 포함되어 있습니다.
  • 모바일 하드 디스크 파티션 소프트웨어
  인기 추천

  • 디스플레이 타원을 초과하도록 CSS를 설정하는 방법
  • CSS에서 글꼴 크기를 설정하는 방법
  • CSS에서 호버를 사용하는 방법
  • CSS에서 문자 간격을 설정하는 방법
  • CSS3의 새로운 기능은 무엇입니까?

  인기 튜토리얼

  더>

  관련 튜토리얼

  인기 추천

  최신 강좌

  • 
    최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

    1421767
  • 
    PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

    4266170
  • 
    JAVA 초보자용 비디오 튜토리얼

    2520114
  • 
    Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

    506601
  • 
    PHP 제로 기반 입문 튜토리얼

    861661

  • 
    최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

    1421767 학습 시간
  • 
    JAVA 초보자용 비디오 튜토리얼

    2520114 학습 시간
  • 
    Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

    506601 학습 시간
  • 
    웹 프론트 엔드 개발에 대한 빠른 소개

    215671 학습 시간
  • 
    PS 비디오 튜토리얼을 처음부터 마스터하세요

    887110 학습 시간

  • 
    [웹 프런트엔드] Node.js 빠른 시작

    7281 학습 시간
  • 
    해외 웹 개발 풀스택 강좌 총집합

    5677 학습 시간
  • 
    Go 언어 실습 GraphQL

    4771 학습 시간
  • 
    550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

    679 학습 시간
  • 
    기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

    24076 학습 시간

  최신 다운로드

  더>

  웹 효과

  웹사이트 소스 코드

  웹사이트 자료

  프론트엔드 템플릿

  • [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
  • [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
  • [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
  • [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
  • [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
  • [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
  • [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
  • [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

  • [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
  • [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
  • [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
  • [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
  • [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
  • [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
  • [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
  • [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

  • [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
  • [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
  • [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
  • [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
  • [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
  • [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
  • [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
  • [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

  • [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
  • [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
  • [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
  • [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
  • [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
  • [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
  • [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
  • [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿
  

  공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

  회사 소개 부인 성명 Sitemap

  © php.cn All rights reserved