SeonHyungJo/CJK.html

## CJK.html
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    width: 400px;
    margin: 0px 10px 60px;

    border: 1px solid black;
  }

  .word-normal {
    word-break: normal;
  }

  .word-break {
    word-break: break-all;
  }

  .word-keep {
    word-break: keep-all;
  }

  .word-keep_break-word {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
</style>

<body>
  <p>word-break : normal</p>
  <div class="word-normal">
    것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
    영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
  </div>

  <p>word-break : break-all</p>
  <div class="word-break">
    것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
    영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
  </div>

  <p>word-break : keep-all</p>
  <div class="word-keep">
    것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
    영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
  </div>

  <p>word-break : keep-all; overflow-wrap : break-word</p>
  <div class="word-keep_break-word">
    것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
    영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<style>
	div {
	width: 400px;
	margin: 0px 10px 60px;

	border: 1px solid black;
	}

	.word-normal {
	word-break: normal;
	}

	.word-break {
	word-break: break-all;
	}

	.word-keep {
	word-break: keep-all;
	}

	.word-keep_break-word {
	word-break: keep-all;
	overflow-wrap: break-word;
	}
	</style>

	<body>
	<p>word-break : normal</p>
	<div class="word-normal">
	것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
	영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
	</div>

	<p>word-break : break-all</p>
	<div class="word-break">
	것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
	영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
	</div>

	<p>word-break : keep-all</p>
	<div class="word-keep">
	것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
	영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
	</div>

	<p>word-break : keep-all; overflow-wrap : break-word</p>
	<div class="word-keep_break-word">
	것은 때에, 눈이 사는가 되려니와, 그들의 찾아다녀도, 운다. 곳이 열락의 희망의 보라. 어디 없으면 열락의 피는 구하지 못할 이상의 동력은 칼이다. 이 불어 인생에 무엇이 듣기만 군영과 가진 살 보라.
	영원히 예가 그것을 보이는 되려니와, 피가 무엇을 것이다. 가장 기쁘며, 눈에 인생의 그리하였는가? 위하여 앞이 곳이 사는가 속에서 가치를 황금시대다.우리의봄바람을불러유소년에게서것나다라한글자가공백도없이엄청나게길어서박스영역의가로이다.보라,바이며,무엇을그리하였는가?주며,가는피는들어영원히약동하다.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. InhachabitasseplateadictumstquisquesagittispurusPulvinarelmentumintegerenimnequevolutpatac.
	</div>
	</body>

	</html>