[일상 기록장] 티스토리 글 목록 삐져나오는 제목 자르기 (CSS 줄바꿈 속성)

에러를 기록하려고 글을 썼는데... 이게 뭐람?!?

 

이상하게 글이 목록에서 튀어나와 버리는 것이다!!

 

 

하... 너무 못생겼어 ㅠㅠ

이것저것 레퍼런스를 찾아서 겨우겨우 해결했다.

 

 

 

[설정] - [꾸미기] - [스킨 편집] 으로 가서 [html 편집] 탭으로 들어가준다.

 

 

 

Ctrl+F 를 눌러 '.title' 키워드로, 홈 화면에서 글 제목 테마 속성을 다루는 부분이 어딨는지 위와 같이 찾아준다.

 

해당 속성에

word-break: break-all;

문구를 추가해주면 끝 !!!

 

 

 

 

 

CSS에 많은 줄바꿈 속성이 있다.

(출처: https://webclub.tistory.com/262)

 

 

white-space

{
    white-space: normal;
    white-space: nowrap;
    white-space: pre;
    white-space: pre-line;
    white-space: pre-wrap;
    white-space: inherit;
}

• normal: 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다.
• nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다.
• pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원되고 !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작합니다.
• pre-line : 줄 바꿈 시퀀스가 유지됩니다.
• pre-wrap : 줄 바꿈 시퀀스가 축소됩니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

 

 

word-wrap

{
    word-wrap: normal;
    word-wrap: break-word;
}

• normal: 기본값으로 콘텐츠가 컨테이너 경계를 초과합니다.
• break-word : 콘텐츠가 다음 줄로 넘어가고 필요한 경우 단어 줄 바꿈이 발생합니다.

 

 

word-break

{
    word-break: normal;
    word-break: break-all;
    word-break: keep-all;
}

• normal: 평소 규칙대로 단어를 분리합니다.
• break-all : 단어가 문자별로 분리되어 단어의 중간에도 줄 바꿈이 됩니다.
• keep-all : 문자별로 분리되는 것을 금지합니다.

 

 

word-spacing

{
    word-spacing: normal;
    word-spacing: [length];
    word-spacing: inherit;
}

• normal: 기본값으로 기본 간격을 나타냅니다.
• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자(cm , mm , in , pt , pc) 또는 상대 단위 지정자(em , ex , px)가 오는 값입니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

 

 

한 번쯤 읽어둬서 알아두면 좋을 것 같다!