글제목이나 글의 줄바꿈을 변경하는 방법

demun
티스토리스킨수정/제목
2010. 9. 25. 06:00

글 제목이나 글의 줄꿈을 할 대가 있습니다.

제가 스킨을 만들고 꾸미고,,,,,만지작하다보니 궁금한점이 있어서 찾아봤습니다.

우선 제 블로그 타이틀에 살짝 적용해봤습니다.

일반적으로 블로그 타이틀은 중요하기 때문에 <h2>이라는 태그를 사용합니다.
또는 h1 을 이용하기도 합니다.
티스토리의 경우 아래와 같은 식이죠.

<h2><a href="[#\#_article_rep_link_##]">[#\#_article_rep_title_##]</a></h2>

그런데 문제점은 본문의 폭은 한정되있고 블로그를 하다보면 긴 제목의 글이 있을수 있습니다.
짧은글의 경우는 문제가 없는데요.
저는 일단 제목의경우 css 로 살짝 변경하여 배경이 들어가게끔 했습니다.
그리고 padding으로 간격을 조정해서 간단하게 배치를 하였습니다.
줄 바꿈 하지않고 ... 보이게 하기.
일단 사용된 이미지는 아래와 같습니다.

그리곤 css 에서 아래처럼 지정을 해줬습니다.

#entry h2 {
font-size : 1.4em;
background:url(./images/titleBg.gif) no-repeat;
width:540px;
height:54px;
padding:15px 0 0 50px;
overflow:hidden;
text-overflow:ellipsis; 
white-space:nowrap;
}

위의 코드를 잘 보시면 8번째 줄부터 넘치면 안보이고 .... 으로 보이게끔 해줘라는 뜻입니다.
그럼 저의 블로그 제목처럼 배경안에 타이틀이 잘 들어가죠.
긴글을 줄일때는 아래 코드를 사용하세요.

overflow:hidden;
text-overflow:ellipsis; 
white-space:nowrap;

즉 개행하지 말고 한줄로 보이게끔하는 코드는 white-space:nowrap; 입니다.
개행의 문제에다 깔끔하게 보일려면 위의 코드를 전부 써줘야 합니다.
하지만 이도 완벽하지는않습니다. 파이어폭스에서는 제대로 되지 않습니다.
해결책은 다음 링크를 참고하세요. http://kais.tistory.com/entry/CSS-text-overflowellipsis-를-FireFox-에서-사용하기

줄 바꿈 하기.

그리고 다른 형식을 사용할때, 즉 강제로 줄바꿈을 해야 할때가 있습니다. 이는 사이드바에 글들에 많이 사용하는데요.
강제로 줄 바꿈하기.
# 강제로 줄바꿈(특수문자제외) style="word-break:break-all"
# 강제로 줄바꿈(특수문자포함) style="word-wrap:break-word"

그런데 이것이 영어는 말을 잘 듣는데 간혹 말을 안들을때가 있습니다. 즉 한글일때는 안듣곤 합니다. 그럴때는 아래 코드로 개행을 해보세요.
그럼 이런 경우만 있을까요. 반대로 너비를 지정해주고 줄 바꿈을 하지 말아라 할때는 아래 코드를 사용하면 됩니다.
word-break:nowrap;