div 높이를 기준으로 텍스트를 자르는 방법은 무엇입니까?

Question

높이가 192px 인 div가 있습니다. div 내의 텍스트를 잘라내어 끝에 ...을 표시하려고합니다. 이제 큰 텍스트 때문에 스냅 샷에 표시된 것처럼 버튼이 잘립니다. html 태그를 추가하면 이런 일이 발생합니다. 사람이

을 도와 드릴까요?

Answer 1

은 다음과 CSS를 사용해보십시오. 여러 줄의 경우 JavaScript이 필요합니다.

Answer 2

사용 overflow: hidden ... 더 많은 코드를 게시하면 좀 더 구체적으로 알 수 있습니다. 보여 그러나

<div style="overflow:hidden">your code</div> 

에 따라 같은 당신이 필요로하는, 말 ... 사업부에 숨겨진 CSS 속성 : - J-man86은 지금의 텍스트를 숨기려면

Answer 3

을 편집, 간단한 해결책이있다, 오버 플로우를 추가 javascript에서 div의 내용을 가져오고 substr 함수를 사용합니다. div에 표시 할 수있는 문자 수를 파악하기위한 시행 착오입니다. 단일 라인

text-overflow: ellipsis; 
overflow: hidden; 
whitespace: no-wrap; 

이 유일한 작품 :

Answer 4

앞서 언급했듯이 문제를 해결하는 가장 쉬운 방법은 div의 CSS 스타일에 overflow:hidden을 추가하는 것입니다.

그러나 이것은 줄 바꿈 끝에 줄임표 (점)를 추가하는 데 도움이되지 않으며 여러 줄로 된 텍스트 줄 바꿈 (끝에 3 개의 점으로 끝나는 줄)을 인식하지 못합니다. 전적으로 CSS를 사용합니다.

더 쉬운 방법은 jQuery (또는 유사한 JavaScript 라이브러리)를 사용하여 텍스트를 줄 바꿈하고 끝에 3 개의 점을 추가하는 것입니다. 예 :

Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.

또한 때때로 콘텐츠 서버 측을 처리하고 다음 페이지에서 처리 표시하는 것이 좋습니다,하지만 때로는 더 편리 (또는 빠르고/쉽게) 단지 자바 스크립트를 사용 할 수 있습니다. 그래서 여기에 누락 된 대답, jQuery DotDotDot

Answer 5

이 질문은 자바 스크립트와 태그가 :

여기에 트릭을 할 것입니다 jQuery 플러그인입니다.

높이가 원하는 높이보다 낮은 지 확인하는 동안이 예에서와 같이 각 문자 나 단어를 반복 할 수 있습니다. 각 진실 단계에서 요소 내용을 텍스트로 겹쳐 쓸 수 있지만 마지막 단어/문자는 없습니다.

이 경우 converte에서 배열의 문자열을 변환하고 각 반복마다 pop 문자열을 변환했습니다. 이 본문의 마지막 부분을 제거하고, 루프가 infiniteeeee하지 않는 것을 확인합니다 ... 크롬에서 작동하지

/** 
 
* Truncates the text of an element depending its height. 
 
* 
 
* @param {Element} element 
 
* @param {Number} height 
 
*/ 
 
function truncateByHeight(element, height) { 
 
    var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent'; 
 
    var parts = element[textContent].split(' '); 
 

 
    while (parts.pop() && element.clientHeight > height) { 
 
    element[textContent] = parts.join(' '); 
 
    } 
 
} 
 

 

 
var element = document.querySelector('.box'); 
 

 
truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit. 
 

 
Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio. 
 

 
Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>