프론트/HTML|CSS
[HTML/CSS] 줄 맞춤 ( 긴 글 칸에 맞추기 _ 자동 엔터)
원코딩
2022. 9. 1. 01:03
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>