HTML 줄바꿈

2016. 4. 26. 09:50

<nowrap> 

자동 줄바꿈 금지 기능
일반 적의 테이블 셀(tr, td)에서 사용
문제점으로는 다른 셀의 크기가 줄어들 수 있다는 점이고, 
다른 셀에도 nowrap이 있을 경우와 셀마다 셀의 너비가 width로 지정되어 있을면 nowrap은 정확하게 작동되지 않는다.
(비추)

ex)
<table> <tr><td nowrap>자동 줄바꿈 금지 기능</td></tr></table>


<nobr>
자동 줄바꿈 금지 기능
일단적의 단독으로 사용

ex)
<nobr>브라우저를 줄여도 이 부분은 줄어들지 않는다. 단지 스크롤바가 생김</nobr>

 



[white-space]
inherit   말그대로 상속 받는 것
normal        일반적인 것, default
nowrap   줄바꿈을 하지 않는다,
pre           <pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-lin         마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap      pre-line 과 비슷


[white-space:nowrap;]
셀 너비를 지정했다 하더라도 자동으로 줄바꿈이 되지 않는다.
게시판에 자주 사용된다.

ex 1)
<table><tr><td style="white-space:nowrap;">자동 줄바꿈 금지 기능</td></tr></table>
 
ex 2) 모바일 서울 50
.bbs ul li em{width:80%; overflow:hidden; white-space:nowrap; border:1px solid green;}


[word-break]
<word-break:break-all;>
문장을 띄어쓰기 할때 쓰인 공백기준이 아닌 문자단위로 끊어주는 속성

<word-break:keep-all;>
word-break:break-all;과 비슷하나 문자가 아닌 단위로 끊어주는 역할을 한다.


파이어폭스의 줄바꿈 처리 Firefox line break

파이어폭스에서는 word-break 속성이 적용되지 않습니다. 
오직 Internet Explorer용 인데요. 
Firefox 에서 줄바꿈을 하기 위해서는 다음의 코드를 사용하면 됩니다.
 
{
white-space: pre-wrap; /* CSS3*/
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-all; /* Internet Explorer 5.5+ */ 
}


'' 카테고리의 다른 글

URL redirect  (0) 2016.04.26
iframe  (0) 2016.04.25
X11 색상 이름  (0) 2016.04.25
HTML 특수문자코드표  (0) 2016.04.25
CGI와 PHP 관계  (0) 2015.10.16
Posted by 캐논볼
,