관리 메뉴

PC Geek's

CSS: word-wrap, word-break, white-space 속성 메모/ 제목줄을 단정하게 하는 css 본문

프로그램/알림글, 블로그 유지 관리

CSS: word-wrap, word-break, white-space 속성 메모/ 제목줄을 단정하게 하는 css

Daylogs/HTML/CSS word-wrap, word-break 줄바꿈 속성 차이 - 꿀벌개발일지 블로그

CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap [WEBDIR]


word-wrap: break-all; 이 유용한 경우가,

본문에 URL링크를 넣었는데 링크가 너무 길어 웹페이지 레이아웃을 깨버린 경우.

신경쓰면 링크는 남기고 보이는 부분은 ...으로 처리할 수도 있고, 다른 방법을 쓸 수도 있지만, 티스토리 본문인 경우에는 그건 귀찮으니까, 본문 css속성에 저걸 넣으면 됨.


word-break가 유용한 경우는 제목란.

제목란 줄바꿈은 직접 손대줄 수도 있겠지만, 가장 편한 방법은 word-break: keep-all; 

띄어쓰기 단위로 잘라준다. 제목줄에 어절이 토막난 문장이 들어가 있으면 보기 안 좋으니까.

영문장은 이거 안 써도 되는데, 국어는 영어권 언어가 아니어선지 이걸 해줘야.


CSS white-space Property - S3School.com

화이트스페이스, 그러니까 공백문자처리 룰을 정해주는 css면서, 문장 줄바꿈을 금지하는 속성도 넣을 수 있다. 

공백문자가 연이어 있으면 하나만 출력하고 자동줄바꿈하는 것이 디폴트값.

위 링크에 예제실행하는 링크가 있으니 그걸 보면 감이 올 테고,

우리말로 풀어 설명한 것은 http://aboooks.tistory.com/187 참조.


그 외 제목줄에 사용할 수 있는 css

http://webdir.tistory.com/408?category=607031


행간(line-spacing)은 잘 알 것이다. 그 외 hwp에서 잘 쓰던 자간(letter-spacing)도 있고, 단어, 국어로 치면 어절 사이 간격을 정의할 word-spacing도 있다.

https://www.cmsfactory.net/node/40020


cmsfactory.net 사이트에 읽을만한 것이 많다. 특히 워드프레스 블로그 최적화 팁도 여럿 있다.


이 글과 같은 분류글목록으로 / 최신글목록 이동
Comments
Viewed Posts
Recent Comments
Recent Posts