크기 조정 가능한 텍스트 요소에서 줄임표 잘림을 어떻게 구현할 수 있습니까?

텍스트 크기 조정 시 줄임표 잘림

콘텐츠 중간에 줄임표("...")를 사용하여 텍스트를 자르면 가독성을 높일 수 있습니다. UI 요소에는 가변 너비가 있습니다. 이 효과를 얻으려면 텍스트 전체가 표시될 때 줄임표가 사라져야 하는 문제가 발생합니다.

크기 조정 가능한 요소 내에 줄임표를 구현하려면:

1. 사용 사용자 정의 데이터 속성:

   • HTML에서 전체 텍스트를 사용자 정의 데이터 속성에 할당합니다:

2. 이벤트 리스너 설정:

   • JavaScript 함수를 트리거하는 로드 및 크기 조정 이벤트 리스너를 추가하여 이벤트의 innerHTML을 채웁니다. 데이터 속성에 저장된 원본 텍스트를 포함하는 범위 태그.

3. 줄임표 기능:

   • 텍스트를 자르는 JavaScript 함수(예: "start_and_end"):

     <code class="javascript">function start_and_end(str) {
       if (str.length > 35) {
         return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
       }
       return str;
     }</code>

   • 다양한 개체와 글꼴에 대해 필요에 따라 값(예: 35, 20, 10)을 조정합니다.

4. 동적 보간:

   • 글꼴 크기와 요소 너비에 따라 표시할 적절한 문자 수를 결정하려면 동적 보간을 사용하는 것이 좋습니다. .

5. 도구 설명 접근성:

   • 줄임표에 abbr 태그를 추가하면 전체 텍스트가 포함된 도구 설명이 활성화됩니다. 마우스를 가져갔습니다.

이러한 단계를 구현하면 텍스트 요소 중간에 줄임표를 사용하여 텍스트를 효과적으로 잘라 요소가 전체로 늘어날 때 사라지도록 할 수 있습니다. 텍스트의 너비.

위 내용은 크기 조정 가능한 텍스트 요소에서 줄임표 잘림을 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!