word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!!

word-break:break-all HTML 테이블에서 자동 줄 바꿈, 넓이 지정 방법!!

블로그 포스팅을 하며 테이블의 크기 때문에 고민되신적 있으시죠? 내가 원하는 테이블의 크기는 딱 요 정도인데, 칼럼(TD) 안에 입력한 글자에 따라 테이블 크기가 마음대로 변경되어 버리면 참 속상합니다. 오늘은 내가 사용하고자 하는 크기에 맞게 이쁜 테이블을 구성하는 방법에 대해 살펴보겠습니다.

먼저, 예제 테이블을 통해 기본 설정을 확인해보겠습니다. 두 개의 TD 값을 가지며 각각의 너비를 150px로 지정한 테이블을 만들어보겠습니다.

<table border="1px">
    <tr>
        <td width="150px">12345</td>
        <td width="150px">12345</td>
    </tr>
</table>

12345

12345

이렇게 하면, 테이블 안에 아무런 내용이 없거나 지정한 사이즈보다 길이가 작은 문자열이 입력된다면, 내가 지정한 사이즈로 테이블이 삽입됩니다.

글자 입력 시 사이즈 변경 사례 1

이제 텍스트를 삽입해 보겠습니다. 아래와 같이 긴 텍스트를 넣었을 때 테이블의 변화를 확인해 보겠습니다.

<table border="1px">
    <tr>
        <td width='150px'>
            누구를 위해 누군가 기도하고 있나 봐 숨죽여 쓴 사랑시가 낮게 들리는 듯해 너에게로 선명히 날아가 늦지 않게 자리에 닿기를 
            I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 잠시만 귀 기울여 봐 
            유난히 긴 밤을 걷는 널 위해 부를게 또 한 번 너의 세상에 별이 지고 있나 봐 숨죽여 삼킨 눈물이 여기 흐르는 듯해 
            할 말을 잃어 고요한 마음에 기억처럼 들려오는 목소리 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 
            그치지 않을 이 노래 아주 커다란 숨을 쉬어 봐 소리 내 우는 법을 잊은 널 위해 부를게 (다시 걸어갈 수 있도록) 부를게 
            (다시 사랑할 수 있도록) Here I am 지켜봐 나를 난 절대 Singing till the end 멈추지 않아 이 노래 너의 긴 밤이 
            끝나는 그날 고개를 들어 바라본 그곳에 있을게<br/>
            12345678901234567890
        </td>
        <td width='150px'>
            123456789012345678901234567890
        </td>
    </tr>
</table>

누구를 위해 누군가 기도하고 있나 봐 숨죽여 쓴 사랑시가 낮게 들리는 듯해 너에게로 선명히 날아가 늦지 않게 자리에 닿기를 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 잠시만 귀 기울여 봐 유난히 긴 밤을 걷는 널 위해 부를게 또 한 번 너의 세상에 별이 지고 있나 봐 숨죽여 삼킨 눈물이 여기 흐르는 듯해 할 말을 잃어 고요한 마음에 기억처럼 들려오는 목소리 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 커다란 숨을 쉬어 봐 소리 내 우는 법을 잊은 널 위해 부를게 (다시 걸어갈 수 있도록) 부를게 (다시 사랑할 수 있도록) Here I am 지켜봐 나를 난 절대 Singing till the end 멈추지 않아 이 노래 너의 긴 밤이 끝나는 그날 고개를 들어 바라본 그곳에 있을게 12345678901234567890

123456789012345678901234567890

위와 같이 긴 글자를 삽입하면 테이블의 크기가 변경되는 것을 볼 수 있습니다. 이는 지정한 너비보다 긴 내용이 들어가면 자동으로 테이블 크기가 조정되기 때문입니다.

글자 입력 시 사이즈 변경 사례 2

첫 번째 TD 값에는 문자만, 두 번째 TD 값에는 문자와 숫자를 삽입해 보겠습니다.

<table border="1px">
    <tr>
        <td width='150px'>
            누구를 위해 누군가 기도하고 있나 봐 숨죽여 쓴 사랑시가 낮게 들리는 듯해 너에게로 선명히 날아가 늦지 않게 자리에 닿기를 
            I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 잠시만 귀 기울여 봐 
            유난히 긴 밤을 걷는 널 위해 부를게 또 한 번 너의 세상에 별이 지고 있나 봐 숨죽여 삼킨 눈물이 여기 흐르는 듯해 
            할 말을 잃어 고요한 마음에 기억처럼 들려오는 목소리 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 
            그치지 않을 이 노래 아주 커다란 숨을 쉬어 봐 소리 내 우는 법을 잊은 널 위해 부를게 (다시 걸어갈 수 있도록) 부를게 
            (다시 사랑할 수 있도록) Here I am 지켜봐 나를 난 절대 Singing till the end 멈추지 않아 이 노래 너의 긴 밤이 
            끝나는 그날 고개를 들어 바라본 그곳에 있을게
        </td>
        <td width='150px'>
            12345678901234567890
        </td>
    </tr>
</table>

누구를 위해 누군가 기도하고 있나 봐 숨죽여 쓴 사랑시가 낮게 들리는 듯해 너에게로 선명히 날아가 늦지 않게 자리에 닿기를 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 잠시만 귀 기울여 봐 유난히 긴 밤을 걷는 널 위해 부를게 또 한 번 너의 세상에 별이 지고 있나 봐 숨죽여 삼킨 눈물이 여기 흐르는 듯해 할 말을 잃어 고요한 마음에 기억처럼 들려오는 목소리 I'll be there 홀로 걷는 너의 뒤에 Singing till the end 그치지 않을 이 노래 아주 커다란 숨을 쉬어 봐 소리 내 우는 법을 잊은 널 위해 부를게 (다시 걸어갈 수 있도록) 부를게 (다시 사랑할 수 있도록) Here I am 지켜봐 나를 난 절대 Singing till the end 멈추지 않아 이 노래 너의 긴 밤이 끝나는 그날 고개를 들어 바라본 그곳에 있을게

12345678901234567890

문자열을 입력했던 곳은 정상적으로 줄 바꿈이 되었지만, 숫자와 함께 입력한 곳은 처음 만들고자 했던 테이블과 달리 크기가 바뀌어 버렸습니다.

대처 방법 - TD 값의 지정된 크기에 따라 자동 줄바꿈 지정

원하던 테이블의 사이즈에 맞게 글자가 자동 줄바꿈이 되게끔 지정을 해줄 수 있습니다. 바로 TD에 style="word-break:break-all" 스타일을 지정해 주면 테이블 크기에 맞게 자동 줄 바꿈이 이뤄지게 됩니다.

<table border="1px">
    <tr>
        <td width='150px' style="word-break:break-all">
            동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 <br/>
            남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.<br/>
            12345678901234567890
        </td>
        <td width='150px' style="word-break:break-all">
            123456789012345678901234567890
        </td>
    </tr>
</table>

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 12345678901234567890

123456789012345678901234567890

이제 테이블을 생성할 때마다 스트레스를 받지 마시고, 자동 줄 바꿈으로 간편하게 포스팅하세요!

요약

• HTML 테이블에서 너비 지정 방법
• 긴 텍스트가 테이블에 미치는 영향
• word-break:break-all 스타일을 통한 자동 줄바꿈 설정
• 테이블의 고정된 크기를 유지하는 방법

키워드: HTML 테이블, 테이블 너비, 자동 줄 바꿈, 테이블 크기, 웹 디자인, 테이블 스타일, word-break, 브레이크 포인트, 웹 개발, HTML 코딩