원고에서 정성껏 나눈 행이 HTML 화면에서는 한 줄로 이어질 수 있다. CSS의 white-space: pre-wrap은 입력한 줄바꿈과 공백을 보존하면서 창이 좁으면 줄을 더 나눈다.
- 아래 예를 일반 텍스트 파일
poem.html로 저장해 웹 브라우저에서 연다. - 두 행과 둘째 행 앞의 공백이 보이는지 확인한다.
- 창을 좁혀 긴 행이 어떻게 접히는지 본다. 원고의 행갈이와 화면 폭 때문에 생기는 줄바꿈은 서로 다르다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>두 행</title>
<style>.poem { white-space: pre-wrap; }</style>
<p class="poem">창문을 열었다.
바람은 아직 이름이 없었다.</p>
</html>HTML 시나 CSS로 인쇄용 원고 만들기에 적용해볼 수 있다. 들여쓴 소스의 공백도 표시되니 시의 행과 화면의 줄을 나란히 살펴보자. 코드의 정리 습관이 시에 무단 입주할 때가 있다.