[HTML&CSS] 게시판 형식 그대로 유지하기 (white-space:pre-wrap)
https://leeborn.tistory.com/11
게시판 형식 그대로 유지하기
게시판을 만들어서 DB에 저장하고 불러오기는 어렵지 않다. textarea나 input text에서 값을 저장하면 된다. 이때 db에 저장될때 html 태그로 저장할 수 도 있고, text만 그대로 저장할 수 도 있다. 태그들을 그대..
leeborn.tistory.com
위 글에서 white-space의 속성에 대해서 pre에 대해서만 사용했었는데,
pre를 사용하면 공백 등은 그대로 표시해주지만 줄 바꿈을 해주지 않는다.
가장 첫번쨰 white-space:pre 와 같이 공백 등은 그대로 표시해주지만,
긴 글들은 div를 넘어 간다.
이때 white-space:pre-wrap 속성을 쓰면 자동 줄 바꿈도 된다.
그리고 줄 바꿈만 신경 쓴다면,
word-break:break-all의 속성도 사용할 수 있다.
좀 더 자세한 설명들은 아래에서 찾아볼 수 있다.
https://www.w3schools.com/cssref/pr_text_white-space.asp
CSS white-space property
CSS white-space Property Example Demonstrate different values of the white-space property: p.a { white-space: nowrap; } p.b { white-space: normal; } p.c { white-space: pre; } Try it Yourself » Definition and Usage The white-space property specifies h
www.w3schools.com
https://www.w3schools.com/cssref/css3_pr_word-break.asp
CSS word-break property
CSS word-break Property Example Break words at any character: p.a { word-break: break-all; } Try it Yourself » Definition and Usage The word-break property specifies how words should break when reaching the end of a line. Default value: normal Inherited:
www.w3schools.com