-
[HTML&CSS] 게시판 형식 그대로 유지하기 (white-space:pre-wrap)programming/HTML&CSS 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
반응형'programming > HTML&CSS' 카테고리의 다른 글
[HTML&CSS] 자식&자손 선택자, 선택자 여러개 선택하기 (0) 2019.09.30 [HTML&CSS] 아이폰에서 display:none이 안될때 (0) 2019.09.26 [HTML&CSS] a tag의 href="#" 의미 (0) 2019.09.22 [HTML&CSS] div로 게시판 글쓰기 (0) 2019.08.20 [HTML&CSS] 게시판 형식 그대로 유지하기(white-space:pre) (0) 2019.07.28