CSS는 유체 이미지 위에 텍스트를 자릅니다.

Question

나는 이미지 위에 텍스트를 절대적으로 배치하고 있으며 이미지 위에 펼쳐지면 텍스트를 자르고 자합니다. 텍스트의 너비가 정의 된 경우 문제가되지 않습니다. 그러나 이미지의 텍스트 블록은 100 %로 설정되고 이미지의 맨 아래에 배치됩니다.

이미지가 지나치게 확대되면 텍스트를 숨기려면 어떻게해야합니까?

체크 아웃 내 예 : http://jsfiddle.net/qhFUL/

Answer 1

설정 overflowhidden에를 :

.box { 
    overflow: hidden; 
} 

데모 : http://jsfiddle.net/qhFUL/1/

Answer 2

당신은뿐만 아니라 포장에서 텍스트를 방지하려면 (그래서 그것을 이미지를 숨기지 않음)이 작업을 수행 할 수 있습니다.

.box { 
    position: relative; 
    margin-bottom: 20px; 
    overflow: hidden; 
    } 

    .text { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 20px; 
    white-space: nowrap; 
    } 

다음은 줄 바꿈 대신 긴 텍스트를자를 것입니다.

Answer 3

.text div에서 높이를 지정하여 줄 바꿈하고 줄 바꿈하지 않도록 할 수도 있습니다.

당신은 그때까지 조금 아주 조금의 jQuery 생략 스크립트를 추가 할 수 있습니다 ...

http://yue.st/notes/code/js/ellipsis.en.html

또는

좋은

https://github.com/rmorse/AutoEllipsis

... :)