简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
텍스트 오버플로를 사용하여 하이픈 넣기를 방지하는 방법
P粉464208937
P粉464208937 2023-09-03 15:00:49
0
1
522
<p>일부 타이틀에 최대 줄 수를 설정하려고 하는데, 가끔 줄이 하이픈으로 끝나는 경우가 있다는 것이 문제입니다. 나에게 필요한 것은 단어를 끊어야 하는 경우 완전히 숨겨야 하고 이전 단어 뒤에 줄임표를 배치해야 한다는 것입니다. </p> <p>이 코드는 문제를 보여줍니다. </p> <p> <pre class="brush:css;toolbar:false;">#head { 너비:300px; 글꼴 크기: 20px; 디스플레이: -webkit-box !important; 색상: #000000 !중요; 텍스트 오버플로: 줄임표 !important; -webkit-line-clamp: 4 !중요; -webkit-box-orient: 수직!중요; 오버플로: 숨겨진 !중요; }</pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html> <div id="head"> Lorem Ipsum은 인쇄 및 조판 산업의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 이를 뒤섞어 만든 이래로 업계의 표준 더미 텍스트였습니다. </div> </html></pre> </p> <p>"ever"라는 단어에 공백이 있는데 어떻게든 이런 일이 발생하지 않도록 할 수 있나요? </p>
P粉464208937
P粉464208937

모든 응답(1)
P粉231112437
P粉2311124372023-09-04 10:19:09 1층

하이픈 연결을 완전히 숨기고 이전 단어 뒤에 줄임표를 넣으려면 JavaScript를 사용하여 텍스트 내용을 조작할 수 있습니다. 이를 달성하기 위해 코드를 수정하는 방법의 예는 다음과 같습니다.

으아악 으아악 으아악

이 코드에서는 JavaScript 함수 truncateText를 사용하여 지정된 최대 길이를 초과하는 텍스트 내용을 자릅니다. 이 함수는 최대 길이 내에서 마지막 공백 문자를 찾아 나머지 텍스트를 타원으로 바꿉니다.

줄임표를 추가하기 전에 maxLength 매개변수를 원하는 문자 수로 조정할 수 있습니다.

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！