에디터에서 가져온 글을 <pre></pre> 태그 안에서 보여주는데
띄어쓰기 없는 영어 같은 경우 줄바꿈이 되지않고 넘쳐버리게 되었다.
왜그런지 찾아보니
pre태그는 글을 그대로 보여주는 특징이 있어 width가 넘어가도 줄바꿈이 되지 않는다고 한다.
white-space: pre-wrap;
word-break: break-all;pre 태그에 위에 css를 적용해주면 해결이된다.
📌 참고
pre 태그는 마크업의 공백을 그대로 보여줍니다.
Reference/HTML 태그는 마크업의 공백을 그대로 보여줍니다. by @webs 2022. 11. 15. 태그는 마크업의 공백을 그대로 보여줍니다. 코드를 보여줄 때 공백과 줄바꿈을 그대로 보여주기 때문에 태그와 같이
webstoryboy.co.kr
[HTML] <pre>태그- 텍스트를 그대로 표현 & 줄바꿈
줄바꿈이 존재하는 텍스트 데이터를 그대로 출력하고 싶었는데, div, p 태그 안에 넣어도 줄바꿈이 되지 않았다. 관련해서 검색 중 pre 태그에 대해 알게 되었다. 태그는 미리 정의된 형식의 텍스
kimyk60.tistory.com
반응형
'Mark Up & StyleSheet > CSS & SCSS' 카테고리의 다른 글
| prettier 줄바꿈 방지 방법 (0) | 2023.12.29 |
|---|---|
| flex deep dive (0) | 2023.12.29 |
| [SCSS] Architecture (폴더 구조) (1) | 2023.12.11 |
| [CSS] filter 적용하기 (1) | 2023.12.10 |
| [CSS] 헷갈리는 가상클래스 child vs of-type (3) | 2023.12.10 |