0

에서 예상대로 휴식 단어가 작동하지 난 그 바꿈이하는 말을하는바꿈 : IE8

this을 따라 : 테이블에 대해 : 우리는 "고정 된 테이블 레이아웃을"이 필요 휴식 단어를 요소. 심지어 IE8에서는 작동하지 않습니다. 여기에 어떤 기본 사항이 빠졌습니까?

IE8 및 IE6에서 스크린 샷을 첨부합니다. IE8에서 HTML이 어떻게 렌더링되는지. (IE8에서 표를 둘러싸는 패널 스크롤 막대 있습니다.)

IE6

렌더링 된 HTML에서

IE8

IE8

, 난 테이블 레이아웃이 고정 및 스타일이다 FND 또한 적용됩니다.

그래도 IE8은 그리드를 다른 방식으로 표시합니다.

<table cellspacing="0" rules="all" border="0" id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView" style="border-width:0px;border-style:None;height:150px;width:750px;border-collapse:collapse;**table-layout: fixed**"> 
      <tr class="Row" align="center"> 
       <td align="left" style="width:155px;white-space:nowrap;"> 
             <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_typeLabel">IT</span> 
            </td><td align="left" style="width:155px;white-space:nowrap;"> 
             <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_firstNameLabel">AAA</span> 
            </td><td align="left" style="width:155px;white-space:nowrap;"> 
             <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_lastNameLabel">BBB</span> 
            </td><td align="left" style="width:155px;white-space:nowrap;"> 
             <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_appReceivedDateLabel">3/01/2011</span> 
            </td><td align="left" style="width:155px;white-space:nowrap;**WORD-BREAK:BREAK-ALL**"> 
             <span id="ctl00_memberContentPlaceHolder_empiMemberHcidGridView_ctl02_commentsLabel">TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting</span> 
            </td> 
     </table> 

어떤 도움말이 필요합니까? 미리 감사드립니다.

답변

1

실질적으로 말하자면, 필자는 예제에서 발견 된 것과 같은 인위적인 텍스트 (공백이없는)에 대해 단어 줄 바꿈에 대해 걱정하지 않을 것입니다.

해결책 중 하나는 div 안에 콘텐츠를 래핑하고 div32에 너비 & 겹침을 적용하는 것입니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/6Cm3U/1/

+0

@ Vinay..Thanks .. Developer Toolbar에서 "word-wrap : break-word"라는 스타일이 에 적용되고 어떤 문제가 발생하지 않았습니까? 링크에서 스타일이 div에 적용되고 스타일이 적용됩니다. – Ananth

+1

@Ananth, span은 인라인 요소이므로 단어 분리가 작동하려면 '블록'또는 '인라인 블록'으로 설정해야합니다. 업데이트 된 예제를 참조하십시오 http://jsfiddle.net/6Cm3U/2/ 나는 span을 생성하는 ASP.NET 레이블을 사용하고 있으므로 작업 중단을 가능케하는 레이블에 일부 CSS 클래스를 적용한다고 가정합니다. – VinayC