230425 CSS: white-space, word-break 속성

기존 형태

깔끔하게 정리!

 

부트스트랩의 table-success 를 분류 부분에만 적용

white-space: nowrap

word-break: keep-all; vertical align: middle;

<table class="table table-striped">
      <thead class="table-success">
      <tr style="white-space: nowrap">
        <th scope="col">아이디</th>
        <th scope="col">비밀번호</th>
        <th scope="col">회원명</th>
        <th scope="col">이메일</th>
        <th scope="col">전화번호</th>
        <th scope="col">우편번호</th>
        <th scope="col">주소1</th>
        <th scope="col">주소2</th>
        <th scope="col">주소3</th>
        <th scope="col">주소4</th>
        <th scope="col">포인트</th>
      </tr>
      </thead>
      <tbody id="t_body">
      <tr th:each="list: ${user}" style="word-break: keep-all; vertical-align: middle;">
        <td><a th:href="@{/admin/modify(user_id=${list.user_id})}" th:text="${list.user_id}"></a></td>
        <td th:text="${list.user_pass}">2</td>
        <td th:text="${list.user_name}">3</td>
        <td th:text="${list.user_email}">4</td>
        <td th:text="${list.user_tel}">5</td>
        <td th:text="${list.zip_code}">6</td>
        <td th:text="${list.address1}">7</td>
        <td th:text="${list.address2}">8</td>
        <td th:text="${list.address3}">9</td>
        <td th:text="${list.address4}">0</td>
        <td th:text="${list.user_point}">0</td>
      </tr>
      </tbody>
    </table>

white-space

 HTML 요소 내의 공백(whitespace) 처리 방법을 정의하는 CSS 속성. 공백 문자(스페이스, 탭, 줄바꿈)의 처리 제어 가능

• normal: 기본값, 연속된 공백 문자를 하나의 공백으로 처리, 줄바꿈 문자(개행)를 무시
• nowrap: 연속된 공백 문자를 하나의 공백으로 처리, 줄바꿈 문자(개행)를 강제로 무시하지 않음.
• pre: 연속된 공백 문자를 유지, 줄바꿈 문자(개행)도 유지.
• pre-wrap: 연속된 공백 문자를 유지, 줄바꿈 문자(개행)도 유지, 필요에 따라 자동으로 줄을 바꿈.
• pre-line: 연속된 공백 문자를 하나의 공백으로 처리, 줄바꿈 문자(개행)를 유지, 필요에 따라 자동으로 줄을 바꿈.

word-break

텍스트 줄 내에서 단어의 줄바꿈 처리 방법을 정의하는 CSS 속성. 긴 단어가 텍스트 박스를 넘어가지 않고 줄바꿈되도록 제어 가능.

• normal: 기본값으로, 단어를 자동으로 분리하여 줄바꿈
• break-all: 긴 단어를 강제로 줄바꿈 후, 단어의 일부를 다음 줄로 이동
• keep-all: 긴 단어를 줄바꿈하지 않고 한 줄에 그대로 유지
  
  
  
  
  

참고 블로그:

https://jskir.tistory.com/4

[CSS] 줄바꿈 속성 word-break (break-all, keep-all)

https://www.codingfactory.net/10597

CSS / white-space / 공백 처리 방법 정하는 속성