일부 타이틀에 최대 줄 수를 설정하려고 하는데, 가끔 줄이 하이픈으로 끝나는 경우가 있다는 것이 문제입니다. 나에게 필요한 것은 단어를 끊어야 하는 경우 완전히 숨겨야 하고 이전 단어 뒤에 줄임표를 배치해야 한다는 것입니다.
이 코드는 문제를 보여줍니다.
#head { 너비:300px; 글꼴 크기: 20px; 디스플레이: -webkit-box !important; 색상: #000000 !중요; 텍스트 오버플로: 줄임표 !important; -webkit-line-clamp: 4 !중요; -webkit-box-orient: 수직!중요; 오버플로: 숨겨진 !중요; }
Lorem Ipsum은 인쇄 및 조판 산업의 단순한 더미 텍스트입니다. Lorem Ipsum은 1500년대 무명의 인쇄업자가 활자 갤리를 가져와 이를 뒤섞어 만든 이래로 업계의 표준 더미 텍스트였습니다.
"ever"라는 단어에 공백이 있는데 어떻게든 이런 일이 발생하지 않도록 할 수 있나요?
하이픈 연결을 완전히 숨기고 이전 단어 뒤에 줄임표를 넣으려면 JavaScript를 사용하여 텍스트 내용을 조작할 수 있습니다. 이를 달성하기 위해 코드를 수정하는 방법의 예는 다음과 같습니다.
이 코드에서는 JavaScript 함수
truncateText
를 사용하여 지정된 최대 길이를 초과하는 텍스트 내용을 자릅니다. 이 함수는 최대 길이 내에서 마지막 공백 문자를 찾아 나머지 텍스트를 타원으로 바꿉니다.줄임표를 추가하기 전에
maxLength
매개변수를 원하는 문자 수로 조정할 수 있습니다.