텍스트 오버 플로우 관련 문제 : 생략 부호

Question

텍스트 오버플로에 문제가 있습니다. 줄임표 - 내 사이트에서 작동하지 않습니다. 나는 현재 학습 중이며 고정 된 높이의 텍스트가있는 div가있는이 프로젝트를 가지고 있습니다. 나는 text-overflow : ellipsis로 해봤지만 작동시키지 못하는 것 같다.

<section class="comments"> 
    <p> 
     Here is a short comment. 
    </p> 

을 그리고 내 CSS는 다음과 같습니다 : 이제 다음과 같이 내 코드 간다

는

.comments p { 
    height: 40px; 
    text-align: justify; 
    text-overflow: ellipsis-word; 
    line-height: 20px; 
    word-wrap: break-word; 
    overflow: hidden; 
} 

그것은 작동해야하지만 그렇지 않습니다. Firefox, Chrome, Opera 및 IE9로 열려고 시도했지만 어느 누구에게도 해당되지 않습니다. 텍스트가 들어있는 <p>에 스타일을 넣으려고했으나 도움이되지 않았습니다. <p>을 <div>으로 변경하려고 시도한 다음 <div>에 스타일을 적용하려고 시도했지만 작동하지 않았습니다. 나는 텍스트 오버 플로우 (text-overflow)를 시도했다 : 줄임표 만 - 작동하지 않았다. 나는 text-overflow : clip으로 시도했는데 작동하지 않았다. 분명히 나는 ​​어딘가에서 실수를하고있다. 그러나 나는 그것을보기에는 너무 분명하다. 도움!

Answer 1

http://www.quirksmode.org/css/contents.html은 "상자가 white-space: nowrap이고 overflow이 visible이 아닌 경우에만이 속성이 적용됩니다."

text-overflow은 CSS3 spec에 없습니다.

또한 ellipsis-word은 구현되지 않은 것처럼 보입니다. 이 스타일은 저 (Win/Firefox 및 Chrome)에서 작동합니다 :

.comments p { 
    height: 60px; 
    text-align: justify; 
    text-overflow: ellipsis; 
    line-height: 20px; 
    word-wrap: break-word; 
    white-space: nowrap; 
    overflow: hidden; 
    border: 1px solid #000000; 
}