|
|
|
|
|
|
|
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
|
6만원 이상 무료배송
|
|
|
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
|
|
|
|
 |
|
|
|
|
|
|
[스타일시트] word-break:break-all, nowrap으로 줄바꿈 방법
|
|
|
|
작성자:
방장
작성일: 2009-08-04 23:24
조회: 20674
댓글: 1
|
|
|
사실 기본적으로 제공되는 형태의 HTML태그만으로 사이트를 개발한다는 얘기는 제약을 상당히 많이 감수해야 한다는 얘기이기도 하다.
특히 테이블태그에서 경우에 따라 지정한 <td></td>의 크기가 제멋대로 벗어나버리는 경우가 대표적이라 할 수 있겠다.
그렇다면 그 기본적인 제약에서 벗어날 수 있는 방법을 모색해 보자
우선 제목에 열거한 녀석들의 기능을 알아보겠다.
word-break:break-all
- 하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을
하는 스타일속성이다.
기본적으로 <td></td> 안에서 문장은 띄어쓰기의 공백을 기준으로 잘리기 때문에 100픽셀로 크기를
지정했다 해도 공백 없이 100픽셀을 넘어가는 단어가 들어올 경우 이를 무시하고 마구 늘어나게 된다.
이런 단어를 문자단위로 끊어주면 자동으로 100픽셀되는 시점에서 줄바꿈을 해주게 된다.
nowrap
- 그렇다면 반대의 경우도 있을 수 있을 것이다.
특정경우에는 셀의 너비를 지정했다 해도 줄바꿈을 하지 않았으면... 싶을 때도 분명히 있을 터. 그역할을 수행하는 HTML태그가 바로 nowrap 이며... <td>태그의 속성으로만 작동하는 태그가 되겠다.
아래는 두녀석들이 적당히 쓰인 예이다.
#1. 강제 줄바꿈을 허용치 않음
------------------------------------------------------------------------------------------------------------------
<table width="400" border=1>
<tr>
<td width="50%" nowrap>동해물과 백두산이 마르고 닳도록 하느님이</td>
<td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
</tr>
</table>
------------------------------------------------------------------------------------------------------------------
(결과)
| 동해물과 백두산이 마르고 닳도록 하느님이 |
우리나라 만세 무궁화 삼천리 화려강산 |
#2. 강제로 줄바꾸기
------------------------------------------------------------------------------------------------------------------
<table width="400" border=1>
<tr>
<td width="50%" style="word-break:break-all">ooooooooooooooooooooooooooooooooo</td>
<td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
</tr>
</table>
------------------------------------------------------------------------------------------------------------------
(결과)
| ooooooooooooooooooooooooooooooooo |
우리나라 만세 무궁화 삼천리 화려강산 |
아주 오래전 일이 되었지만... 이거 몰라서 얼마나 해맸는지 모른다.
별로 쓰일 곳이 많지 않을 것 같지만... 실제로 게시판 디자인 할때나 해상도에 따라서 유동적인 사이트를 제작할 때 유용하게 쓰일 수 있는 팁이다.
|
|
|
|
|
|
|
|
|
* 관련 댓글 한말씀 부탁합니다.
|
|
|
|
