programming/HTML&CSS

[HTML&CSS] 게시판 형식 그대로 유지하기 (white-space:pre-wrap)

LeeBorn 2019. 8. 8. 22:24
반응형

https://leeborn.tistory.com/11 

 

게시판 형식 그대로 유지하기

게시판을 만들어서 DB에 저장하고 불러오기는 어렵지 않다. textarea나 input text에서 값을 저장하면 된다. 이때 db에 저장될때 html 태그로 저장할 수 도 있고, text만 그대로 저장할 수 도 있다. 태그들을 그대..

leeborn.tistory.com

위 글에서 white-space의 속성에 대해서 pre에 대해서만 사용했었는데,

pre를 사용하면 공백 등은 그대로 표시해주지만 줄 바꿈을 해주지 않는다.

white-space, word-break 속성

가장 첫번쨰 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

 

반응형