CSS : HTML 표에서 word-wrap이 float : left와 작동하지 않습니다.

Question

3 열의 표가 있으며 콘텐츠의 길이에 따라 셀에 텍스트 배경을 설정하고 싶습니다. 그러나 float : left를 설정하면 단어 감싸기가 제대로 작동하지 않습니다.

table { 
table-layout: fixed; 
width: 100%; 
word-wrap: break-word; 
} 

이것은 각 셀의 내용입니다.

.read{ 
    min-height: 20px; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 10px; 
    padding: 0px 10px 0px 10px; 
    border-radius: 4px; 
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0))); 
    float:left; 
} 

<table> 
    <tr> 
     <td width="36px">..</td> 
     <td> 
      <div class="read"> 
      looooooooooooooooooooooooooooooooooooooooooooooooooooooooooog 
      </div> 
     </td> 
    </tr> 
</table> 

float : left를 제거하면 배경이 내용의 길이와 일치하지 않지만 자동 줄 바꿈이 작동합니다. CSS를 어떻게 수정할 수 있습니까?

Answer 1

표시 : 인라인;

.read{ 
     min-height: 20px; 
     margin-top: 10px; 
     margin-bottom: 10px; 
     margin-left: 10px; 
     padding: 0px 10px 0px 10px; 
     border-radius: 4px; 
     background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(142, 175, 196, 1.0)), to(rgba(118, 146, 164, 1.0))); 
     **display:inline;** 
    }