3 줄 이상의 텍스트가있는 순수 CSS 줄임표

첫 번째 두 줄만 표시하는 CSS 전용 방법 (JavaScript/jQuery 없음)이 있으며 세 줄 이상의 줄이 있으면 여분의 줄을 숨기고 생략?3 줄 이상의 텍스트가있는 순수 CSS 줄임표

을 ... 그리고는 다음과 같이합니다 예를 들어

, 어떻게이 바이올린을 할 수 있습니까?

Lorem Ipsum Dolor 
Sit Amet Consectetur 

Ut Enim Ad Minim 
Veniam Quis Nostrud... 

Duis Aute Irure 
Dolor In...

미리 감사드립니다.

2014-08-22 Ryan

http://www.mobify.com/blog/multiline-ellipsis-in -pure-css/ –

감사합니다. 나는 그것을 조사 할 것입니다. – Ryan

[CSS를 사용하여 텍스트 길이를 n 줄로 제한] (http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) –

text-overflow:ellipsis 속성을 height과 함께 사용할 수 있습니다. 텍스트 오버 플로우를 사용하여이

.truncate 
{ 
width: 250px; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
height:100px; 
}

처럼

, 당신은 자바 스크립트를 사용하지 않고 출력을 표시 할 수 있습니다.

소스이 방법을 사용할 수있는 여러 줄임표를 들어

새로운 업데이트

. 내가 생각

css 
.classname:after{ 
content: "\02026"; 
}

몇몇 링크가 유용 할 수 있습니다

2014-08-22 13:56:13

나는 OP가'text-overflow : ellipsis; '를 알고 있다고 생각하지만 그는 여러 줄임표를 얻기위한 해결책을 찾고있다. –

그의 피들은 생략 부호 속성 @HashemQolami를 사용하지 않았 음을 보여줍니다. –

'text-overflow : ellipsis'는 한 줄 잘림에 대해서만 작동합니다. 첫 번째 두 줄만 표시하고 추가 줄이있는 경우 줄임표가 필요합니다 (OP의 예 참조). – Ryan

답변