[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상

[CSS] p 태그 내에서 개행 문자가 적용되지 않는 현상

 

React로 나만의 이력서 & 포트폴리오 페이지를 만들던 중 작은 오류가 발생했다.

p 태그 안에 들어갈 텍스트에 개행을 넣기 위해 stirng을 백틱으로 감싸고 줄바꿈을 입력했는데 페이지에 적용되지 않았다.

 

개행이 적용되지 않은 상황

const aboutme = {
  EN: `Hi, I'm blahblah.
      I started learning software development with interest in mobile application development.
      Now I'm trying to progress as an agile and systematic front-end developer.`,
  KO: '안녕하세요, 앱 개발에 흥미를 느껴 개발을 시작했으며 민첩하고 체계적인 프론트엔드 개발자로 나아가려 하는 @@@입니다.',
};

<p>{aboutme[lang]}</p>

 

해결 방법은 간단했다. CSS의 white-space 속성을 styled component 또는 css에 넣어주면 된다.

white-space 속성의 기본값이 normal이라 개행 문자가 무시된 것이다.

이래서 기초가 중요한 것 같다.

 

white-space 속성에 따른 공백 문자 처리

내 경우 스페이스 및 탭은 병합시키고, 개행 문자는 유지시키고 싶었기에 white-space: pre-line; 속성을 사용했다.

적용된 모습은 다음과 같다.

개행이 잘 적용된 모습

 

---

References

https://developer.mozilla.org/ko/docs/Web/CSS/white-space