띄어쓰기가 없는 텍스트,

예를 들면 URL(https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=puseudo+class) 이나, 

영문이 쭈욱 이어져있을경우 텍스트가 정해진 영역을 벗어나 테이블 레이아웃이 깨지는 경우가 발생한다.


HTML, CSS

<html>
    <head>
        <style>
            table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;}
            td:first-child {width:200px;border-right:1px solid #000;}
            td:last-child {width:100px;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
            </tr>
        </table>
    </body>
</html>


브라우저 뷰확인



해결방안

이럴경우, table에 table-layout:fixed로 크기를 고정시켜주고, word-break속성으로 글자마다 떨어지게 하면 된다.



HTML, CSS

<html>
    <head>
        <style>
            table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;table-layout:fixed;word-break:break-all;}
            td:first-child {width:200px;border-right:1px solid #000;}
            td:last-child {width:100px;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
                <td>bbbbbbbbbbb</td>
            </tr>
        </table>
    </body>
</html>


브라우저 뷰확인




추가정보

이번에 진행중인 프로젝트에서 단말기 테스트를 하다보니, 아이폰에서는 table width:100%가 잘 먹지않는 경우가 있었다. 

이 때도 역시 table-layout:fixed를 사용하면 해결된다.



글쓰고 저장