리액트에서만 이러는 건지는 모르겠지만, modal의 title 부분에 개행(‘\n’)을 적용하려 하는데 적용이 안됐다…
따라서 서칭끝에 해결 방법을 찾았다.
해결방법
div {
white-space: pre-wrap;
}
바로 스타일을 통해서 개행이 작동하도록 해주는 것이다.
white-space는 공백문자를 처리하는 방법을 설정한다.
다양한 설정값이 존재하지만 나는 그 중에서도 개행을 해주는 것만 필요하기에 pre-wrap을 적용했다.
pre-wrap은 띄어쓰기, 들여쓰기, 줄바꿈을 그대로 적용시켜준다. 이러한 점은 pre 속성값과 동일한데, pre와 달리 pre-wrap은 텍스트 안에서 긴 행이 존재할 때 자동으로 줄바꿈을 적용시켜준다는 것이다. 따라서 좌우 스크롤바가 존재하지 않아도 그대로 화면에서 잘리지 않고 보이게 된다. (pre는 긴 행이 존재해도 그대로 출력한다.)
적용 결과 화면
1. white-space를 작성하지 않았을 때, 결과화면 => 개행적용 X
white-space 적용 안 한 modal 소스코드
개행 추가 소스코드
적용 결과 화면(개행 적용 안됨)
2. white-space를 작성했을 때, 결과화면 => 개행 적용 O
white-space 적용한 modal 소스코드
개행 추가 소스코드
적용 결과 화면(개행 적용 됨)
3. white-space를 작성했지만, 개행을 작성하지 않았을 때, 결과화면 => 개행적용 X
white-space 적용한 modal 소스코드
개행 추가 없는 소스코드
적용 결과 화면(개행 적용 안됨)
결론
white-space를 추가해도 글에 개행(‘\n’)을 넣지 않으면 어엄청 긴 행이 아닌 이상 개행 적용이 안된다!
참고
html 또는 react에서 /r 또는 /n으로 줄바꿈(개행)이 안됨
CSS의 white-space 속성 사용법
Comments