white-sapce

Front-end/CSS

by 본투비곰손 2023. 6. 12. 00:09

728x90

white-space

요소가 공백 문자를 처리하는 법을 지정

nomal : 연속공백을 합치고 한줄이 길어서 넘칠경우 자동으로 줄바꿈 (일반적인 스타일) 줄끝의 공백 없앰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <style>
    div {
      width: 300px;
      height: 300px;
      white-space: normal;
      border: 1px solid black;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div>
    Lorem ipsum dolor sit amet,   consectetur adipisicing elit.   Dolorum rem inventore voluptatum magnam perspiciatis, reprehenderit consectetur quos sequi velit qui, eligendi necessitatibus saepe quidem, cum autem ipsa. Adipisci, nihil eaque.
    Lorem ipsum dolor sit amet   consectetur adipisicing elit.   Eum nisi dolores necessitatibus aliquam deleniti eligendi, dolore qui rem dolorum non in, illo iusto alias. Quod sunt odio cupiditate veniam laudantium.
    Lorem ipsum dolor sit amet   consectetur adipisicing elit.   Repellat modi vitae, voluptas exercitationem soluta sit vero doloribus. Ex assumenda reiciendis totam deserunt impedit deleniti doloribus natus quae molestiae, hic aspernatur.
  </div>
</body>
</html>

nowrap : 연속공백을 합치고 한줄이 길어서 넘쳐도 <br>이 있어야만 줄바꿈 줄끝의 공백 없앰

<style>
    div {
      width: 300px;
      height: 300px;
      white-space: nowrap;
      border: 1px solid black;
    }
  </style>

pre : 연속공백유지 하고 한줄이 길어서 넘쳐도 개행문자와 <br>이 있어야만 줄바꿈 줄끝의 공백 유지

<style>
    div {
      width: 300px;
      height: 300px;
      white-space: pre;
      border: 1px solid black;
    }
  </style>

pre-wrap : 연속공백유지 하고 개행문자와 <br>이 있으면 줄을 바꾸고 한줄이 길어서 넘치면 줄바꿈 줄끝의공백은 넘침

 <style>
    div {
      width: 300px;
      height: 300px;
      white-space: pre-wrap;
      border: 1px solid black;
    }
  </style>

pre-line : 연속공백을 하나로 합치고 줄바꿈은 개행문자와 <br>이있으면 줄을 바꾸고 한줄이 길어 넘치면 줄바꿈

줄끝의 공백 없앰

 <style>
    div {
      width: 300px;
      height: 300px;
      white-space: pre-line;
      border: 1px solid black;
    }
  </style>

break-spaces : pre-wrap와 동일하지만 연속공백을 유지하고 연속공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있다.

pre-wrap와 달리 줄끝의 연속공백이 요소 밖으로 넘치지 않지만 없던 빈줄이 생겨서 요소 본질 크기에

영향을 준다. 줄끝의 공백 줄바꿈

 <style>
    div {
      width: 300px;
      height: 300px;
      white-space: break-spaces;
      border: 1px solid black;
    }
  </style>

728x90

'Front-end > CSS' 카테고리의 다른 글

position : sticky (0)	2023.06.14
pointer-event (0)	2023.06.14
말줄임표 (영역에서 텍스트넘칠때 ...으로 줄이기) (0)	2023.06.12
appearance (0)	2023.06.12
object-fit (0)	2023.06.12