매우 긴 문자열의 모바일 웹 앱

Question

휴대 전화 용으로 설계된 웹 앱을 만들려고합니다. 하지만 나는 매우 큰 링크가 있습니다. 텍스트가 맞지 않으면이 문자열을 분리하고 원하는 경우 전체 문자열을 사용합니다.

나는 word-wrap:break-word를 사용하여 시도 :

.breakWord { 
    width: 100% 
    word-wrap: break-word; 
} 

내 HTML은 다음과 같습니다

<table> 
    <tr> 
    <td rowspan="2" style="width:10%" >picture</td> 
    <td colspan="2" style="width:90%" class="breakWord">link</td> 
    </tr> 
    <tr> 
    <td style="width:80%">info1</td> 
    <td style="width:10%">info2</td> 
    </tr> 
    <tr> 
    </tr> 
</table> 

이 코드는 페이지에 맞지 않는 - 가로 스크롤 막대가 나타납니다.

텍스트를 어떻게 만들 수 있습니까?

Answer 1

원본의 오류를 수정하면 올바르게 작동합니다.

• 스타일 블록에서 width:100%을 제거하십시오. 그것은 td에서 인라인 스타일과 충돌하고, 또한, 나는 폭 스타일과 함께 colspanned td가 발생하는 경우 일부 브라우저가 혼동 할 수 있다고 생각을 colspan

해야 세미콜론

colpan이 골대를 벗어났습니다. 아래 td 두 개가 이미 너비를 올바르게 설정 했으므로 style="width:90%"을 안전하게 제거 할 수 있습니다.

편집 :
는 그래서 모든 곳에서 작동하지 않습니다. this question에 대한 대답에 따르면 테이블에 문제가 있습니다. 먼저 테이블 너비가 계산 된 다음 화면의 사용 가능한 너비 대신 계산 된 너비로 10 %와 90 %가 사용됩니다.
가능한 해결 방법은 테이블에 특정 폭을 지정하고 테이블 레이아웃을 고정으로 설정하는 것입니다. 열 병합에 대한

<table style="width:100%; table-layout:fixed">