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

텍스트의 줄임표: Mac 스타일 달성

과제:

줄임표 구현( " ...") 크기 조정 가능한 요소 내의 텍스트 중간에 있습니다. 요소 너비가 전체 텍스트 너비와 일치하면 줄임표가 사라져야 합니다.

해결책:

1. HTML에 데이터 속성 추가:

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

   <span data-original="your string here"></span>

   로그인 후 복사

2. JavaScript 이벤트 리스너:

   요소의 로드 및 크기 조정 이벤트에 이벤트 리스너를 추가합니다. 이러한 리스너는 다음 작업을 수행하는 JavaScript 함수를 트리거해야 합니다.

   • data-* 속성에서 원본 텍스트 검색
   • span 요소의 innerHTML에 텍스트 배치

3. 줄임표 함수:

   텍스트가 특정 길이를 초과하면 잘라내는 줄임표 함수를 만듭니다. 예:

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

   로그인 후 복사

   필요에 따라 텍스트 길이와 위치 값을 사용자 정의하세요.

4. 전체 텍스트에 대한 도구 설명:

   접근성을 높이려면 전체 텍스트를 표시하는 도구 설명과 함께 줄임표에 약어 태그를 추가하는 것이 좋습니다.

   <code class="html"><abbr title="full string">...</abbr></code>

   로그인 후 복사

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