크기 조정 가능한 요소를 사용하여 잘린 텍스트에 줄임표를 구현하는 방법은 무엇입니까?

잘린 텍스트 내 줄임표 삽입

크기 조정 가능한 요소 내 텍스트 중간에 줄임표를 구현하려면 다음 접근 방식을 고려하세요.

1단계: 데이터 속성 선언

HTML에서는 다음과 같이 사용자 정의 data-* 속성 내에 전체 텍스트를 포함합니다.

2단계: 이벤트 리스너

할당 JavaScript 함수를 로드하고 크기를 조정하기 위한 이벤트 리스너.

3단계: 줄임표 함수

줄임표 삽입을 처리하려면 다음 JavaScript 함수를 활용하세요.

<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>

잘림에 따라 값(예: 20 및 10)을 조정합니다.

4단계: InnerHTML 삽입

이벤트 리스너 함수 내에서 원본 데이터를 읽습니다. 속성을 지정하고 이를 범위 태그의 innerHTML에 배치합니다.

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>

5단계: 도구 설명(선택 사항)

사용자에게 전체 문자열이 포함된 도구 설명을 제공하려면 , 제목 속성이 있는 abbr 태그를 추가하세요:

...

위 내용은 크기 조정 가능한 요소를 사용하여 잘린 텍스트에 줄임표를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!