text-indent

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
div.a {text-indent: 50px;}
div.b {text-indent: -2em;}
div.c {text-indent: 30%;}
</style>
</head>
<body>

<h1>The text-indent Property</h1>

<h2>text-indent: 50px:</h2>
<div class="a">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: -2em:</h2>
<div class="b">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-indent: 30%:</h2>
<div class="c">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body>
</html>

text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
h4 {text-decoration: underline overline;}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>

</body>
</html>

text-decoration style(IE not support)

<!DOCTYPE html>
<html>
<head>
<style>
p {text-decoration-line: underline;}
p.a {
  -webkit-text-decoration-color: red; /* Safari */  
  text-decoration-color: red;
}
p.b {text-decoration-style: solid;}
p.c {text-decoration-style: wavy;}
p.d {text-decoration-style: double;}
</style>
</head>
<body>
<p class="a">The color of the underline should now be red!</p>
<p class="b">This is some text with a solid underline.</p>
<p class="c">This is some text with a wavy underline.</p>
<p class="d">This is some text with a double underline.</p>
</body>
</html>

text-shadow : 텍스트에 그림자를 추가

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
  text-shadow: 4px 4px red;
}
.ex2 {
  text-shadow: 4px 4px 10px red;
}
.ex3 {
  text-shadow: -4px -4px red;
}
</style>
</head>
<body>
<h1 class="ex1">The text-shadow Property</h1>
<h1 class="ex2">The text-shadow Property</h1>
<h1 class="ex3">The text-shadow Property</h1>
</body>
</html>

word-wrap : 띄어쓰기 없는 긴 문장 처리

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px; 
  border: 1px solid #000000;
  margin-bottom : 10px;
}
div.a {
  word-wrap: normal;
}
div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>
<div class="a"> This div contains a very long word: test123test123test123test123test123test
123test123test123test123test123test123test123test123test123test123test123test123test123test123.</div>
<div class="b"> This div contains a very long word: test123test123test123test123test123test
123test123test123test123test123test123test123test123test123test123test123test123test123test123.</div>
</body>
</html>