Home
CSS
문단 꾸미기

하이픈(hyphen) 문단 줄바꿈 처리 방법

하이픈 뒤에서 자동으로 줄바꿈이 되는 경우가 발생합니다. 이 때 처리 방법 몇 가지를 소개해드립니다. 줄바꿈을 무시하고 하이픈 뒷단어도 유지하려면 다음 속성을 추가합니다. 줄바꿈이 될 지점에 ​ 를 넣어줍니다.
1 min read

하이픈 뒤에서 자동으로 문단이 바뀌어 줄바꿈이 되는 경우가 발생하는 문제를 해결하기 위한 몇 가지 방법을 살펴봅니다.

 

방법 1

줄바꿈을 무시하고 하이픈 뒤의 내용도 유지하려면 다음 속성을 추가합니다. 속성값이 적용이 되지 않는다면 !important 속성을 이용합니다. 

word-break: break-all;
word-wrap: break-word;

 

방법 2

하이픈 앞 단어까지 함께 줄바꿈하려면 다음 속성을 이용합니다. 이 방법은 내용이 길 경우 요소 밖으로 넘어갈 수 있습니다. 

white-space: nowrap;

 

방법 3

폭 없는 공백(zero width space)을 사용하여 줄바꿈이 될 지점에 ​ 를 넣어줍니다. 적용이 되지 않을 경우 &를 &로 바꿔보세요.

 

기타 CSS 참조

문단 꾸미기로 돌아가기

You may like these posts

  • 문단 정렬하는 방법 - text-align
    text-align text-align 속성은 문단의 텍스으 정렬 방식을 정합니다. 속성 값으로 워드나 한글 문서에서 흔히 사용하던 '왼쪽 정렬', '오른쪽 정렬', '양쪽 정렬', '가운데 정렬' 등을 지정할 수 있습니다.   기본형 text-align : left | right | …
  • 들여쓰기, 내어쓰기 하는 방법 - text-indent
    text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다.   기본형 text-indent : value value : 크기를 지정합니다. 음수 값도 사용할 수 있습니다. &…
  • 문단을 다단으로 만드는 방법 - columns
    일반적으로 신문을 보면 텍스트 단(column)이 여러 개로 나누어져 있습니다. 웹 문서에서도 이렇게 다단으로 편집할 수 있습니다. column과 관련된 여러 속성으로 쉽게 다단을 편집할 수 있습니다. 목차 columns-width columns-count …
  • 줄바꿈을 단어 기준으로 할지, 글자 기준으로 할지 정하기 - word-break
    word-break word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다.   기본형 word-break : normal | break-all | keep-all normal : CJK 문자는 글자 기준으로, CJK 이외의 …
  • 내용이 박스 밖으로 벗어났을 때 처리 방법 - overflow
    overflow overflow 속성은 white-space: norwap;으로 지정해 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기 밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.   기본형 overflow : visible …
  • 하이픈(hyphen) 문단 줄바꿈 처리 방법
    하이픈 뒤에서 자동으로 문단이 바뀌어 줄바꿈이 되는 경우가 발생하는 문제를 해결하기 위한 몇 가지 방법을 살펴봅니다.   방법 1 줄바꿈을 무시하고 하이픈 뒤의 내용도 유지하려면 다음 속성을 추가합니다. 속성값이 적용이 되지 않는다면 !important 속성을 이용합니다. …

Post a Comment