<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word break, white-space</title>
<style>
body{
font-family: '굴림', Malgun Gothic, sans-serif;
font-size: 16px;
}
.content, .content2, .content3{
width: 500px;
/*height: 200px; 높이를 주는 것은 좋지 않다. 컨텐츠 내용에 맞게 들어나도록 설정! */
border: 3px solid black;
}
.content p {
word-break: break-all;
}
.content2 p{
text-align: justify;
}
.content3 p{
text-align: justify;
word-break: break-all;
}
.white{
/*white-space : nowrap;*/
white-space: pre;
}
</style>
</head>
<body>
<div class="content">
<p>Loremipsumdolorsitamet,consecteturadipisicingelit.QuibusdamadnesciuntdoloremexcepturiLoremipsumdolorsitamet,consecteturadipisicingelit.QuibusdamadnesciuntdoloremexcepturiLoremipsumdolorsitamet,consecteturadipisicingelit.QuibusdamadnesciuntdoloremexcepturiLoremipsumdolorsitamet,consecteturadipisicingelit.QuibusdamadnesciuntdoloremexcepturiLoremipsumdolorsitamet,consecteturadipisicingelit.QuibusdamadnesciuntdoloremexcepturiLoremipsumdolorsitamet,consecteturadipisicingelit.Quibusdamadnesciuntdoloremexcepturi </p>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ex ipsum qui iusto tenetur animi quod reprehenderit autem temporibus libero facilis, amet, ab non! Id voluptates explicabo qui impedit tempora!</p>
</div>
<div class="content3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, ex ipsum qui iusto tenetur animi quod reprehenderit autem temporibus libero facilis, amet, ab non! Id voluptates explicabo qui impedit tempora!</p>
</div>
<hr>
<div class="white">
Lorem
ipsum dolor sit amet,
consectetur adipisicing elit.
Quo, officia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem est voluptatibus consequuntur aliquam dolores, iste laboriosam quae! Perferendis consequuntur incidunt, deleniti atque, optio totam hic deserunt inventore autem dicta praesentium.
</div>
</body>
</html>
hi