줄임표 오버플로 IE7 떠 다니는 블록 페이지 아래로 밀어

일부 긴 텍스트 왼쪽에 일부 블록 내용을 떠 다니는 IE7에서 문제가 나타납니다. 오른쪽에 줄임표 (또는 클립)를 넣고 싶습니다. 제한된 폭 : IE8 +에서줄임표 오버플로 IE7 떠 다니는 블록 페이지 아래로 밀어

<!DOCTYPE html> 
<html> 
    <head> 
    <title>IE7 Float Test</title> 
    <style> 
     .container { 
     width: 200px; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     } 
     .floater { 
     width: 20px; 
     height: 20px; 
     float: left; 
     background: red; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="floater"></div> 
     <span class="text">This is some long long long long long long text I want on the same line.</span> 
    </div> 
    </body> 
</html>

다른 모든 브라우저가 긴 텍스트는 부유 요소의 오른쪽에 제대로 ellipsized됩니다. IE7에서는 텍스트 스팬이 부동 요소 아래로 밀려 내려 가서 거기에 줄임표가 표시됩니다. 인라인 블록 해킹없이 IE7에서 floated 요소와 같은 줄에이 방법을 사용할 수 있습니까?

출처

2011-12-12 Dan Auclair

인라인 블록 해킹없이 IE7에서 floated 요소 과 같은 줄에이 방법을 사용할 수 있습니까?

display: inline-block을 사용하면 IE7에서 작동하도록 해킹하는 것이 쉬운 방법입니다. 왜 그럴 필요가 있을지 모르겠습니다.

http://jsbin.com/orozen

<!DOCTYPE html> 
<html> 
    <head> 
    <title>IE7 Float Test</title> 
    <style> 
     .container { 
     width: 200px; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     } 
     .floater { 
     width: 20px; 
     height: 20px; 
     background: red; 
     display: inline-block; 
     *display: inline; 
     zoom: 1; 
     } 
     .text { 
     padding-left: 4px; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="floater"></div><span class="text">This is some long long long long long long text I want on the same line.</span> 
    </div> 
    </body> 
</html>

출처

2011-12-12 10:32:01 thirtydot

줄임표 오버플로 IE7 떠 다니는 블록 페이지 아래로 밀어

답변

관련 문제