텍스트 오버플로를 사용하여 하이픈 넣기를 방지하는 방법
P粉464208937
2023-09-03 15:00:49
<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
하이픈 연결을 완전히 숨기고 이전 단어 뒤에 줄임표를 넣으려면 JavaScript를 사용하여 텍스트 내용을 조작할 수 있습니다. 이를 달성하기 위해 코드를 수정하는 방법의 예는 다음과 같습니다.
이 코드에서는 JavaScript 함수
truncateText를 사용하여 지정된 최대 길이를 초과하는 텍스트 내용을 자릅니다. 이 함수는 최대 길이 내에서 마지막 공백 문자를 찾아 나머지 텍스트를 타원으로 바꿉니다.줄임표를 추가하기 전에
maxLength매개변수를 원하는 문자 수로 조정할 수 있습니다.