[HTML/CSS] 줄 맞춤 ( 긴 글 칸에 맞추기 _ 자동 엔터)

input 태그 안에 값을 넣을 때 아주 긴~~ 문장을 입력할 때가 있다. 

이때 스타일을 적용하지 않으면 한줄로 입력이 되기 때문에 주의가 필요하다. 

방법은 아래와 같다. 

 

 

<pre style="white-space: pre-wrap;border:none;background-color: white;">

 

 

white-space: pre-wrap

적용 전

 

white-space: pre-wrap

적용 후

 

 

 

 

<div class="container">
     <h1>상세보기</h1>
     <div class="row">
      <table class="table">
        <tr>
         <th width=20% class="text-center warning">번호</th>
         <td width=30% class="text-center">${vo.no }</td>
         <th width=20% class="text-center warning">작성일</th>
         <td width=30% class="text-center">${vo.dbday }</td>
        </tr>
        <tr>
         <th width=20% class="text-center warning">이름</th>
         <td width=30% class="text-center">${vo.name }</td>
         <th width=20% class="text-center warning">조회수</th>
         <td width=30% class="text-center">${vo.hit }</td>
        </tr>
        <tr>
         <th width=20% class="text-center warning">제목</th>
         <td colspan="3">${vo.subject }</td>
        </tr>
        <tr>
          <td colspan="4" class="text-left" valign="top" height="200">
           <pre style="white-space: pre-wrap;border:none;background-color: white;">${vo.content }</pre>
          </td>
        </tr>
        <tr>
          <td colspan="4" class="text-right">
            <a href="update.do?no=${vo.no }" class="btn btn-xs btn-info">수정</a>
            <a href="delete.do?no=${vo.no }" class="btn btn-xs btn-warning">삭제</a>
            <a href="list.do" class="btn btn-xs btn-success">목록</a>
          </td>
        </tr>
      </table>
     </div>
   </div>