CSS를 사용하여 문자 또는 문자 수를 제한하는 방법은 무엇입니까?

Question

다음 중 하나를 수행 할 수있는 CSS 속성이 있습니까? 하지만 먼저 설명해 드리겠습니다.

각 항목의 너비가 200px 인 석조물 레이아웃을 상상해보십시오. 각각 높이 : 250px; (이것은 단지 예일 뿐이다).

각 항목에는 썸네일과 링크가 있으며, 종종이 링크는 2-3 줄로 감싸기 때문에 각 항목의 높이가 달라집니다.

클래스 내에서 최대 문자 수를 설정하거나 특정 줄 수 이후에 줄 바꾸기를 자르는 방법이 있습니까? 그리고 어쩌면 콘텐츠 삽입에 CSS 효과를 추가 할 수도 있습니다. "..."; 그것이 끝났음을 보여주는 줄 끝 앞에?

도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

당신은 text-overflow을 시도 할 수 있습니다, 그러나 그것은 몇 가지 제한이 있지만, 여전히 당신에게 스위트 룸 수 :

Example

<div id="container"> 
    This is some short content to demonstrate the css-property 
    text-overflow 
</div>​ 

#container{ 
    width:100px; 
    height:50px; 
    border:1px solid red; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}​ 

Answer 2

문자가 아니지만 요소의 너비를 픽셀 단위로 설정할 수 있으며 text-overflow 속성에 "..."을 추가해야합니다.

또한 요소의 높이를 30px로 설정하고 줄 높이 CSS 속성을 15px로 설정하고 overflow:hidden을 추가하여 줄 수를 제한 할 수 있습니다. 그렇게하면 정확히 두 줄의 텍스트가 나타납니다.

.twoLines{ 
    height:30px; 
    line-height:15px; 
    overflow:hidden; 
}