CSS3 Text

Next ❯CSS3 Font

  • turned_in_notText Related Properties
    • labelText Properties
      • text-decoration-line
      • text-decoration-style
      • text-decoration-color
      • text-decoration
      • text-overflow
      • text-shadow
      • text-align-last
    • labelExtra Properties
      • word-wrap
      • word-break
      • writing-mode

Checkout me !
h1 {
  text-decoration-line:undeline;
  text-decoration-style:solid;
  text-decoration-color:black;
}
text-decorationsubject
text-decorationclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  text-decoration-line:undeline;
  text-decoration-style:solid;
  text-decoration-color:black;
  text-align:center;
}
</style>
</head>
<body>
  <h1>Checkout me !</h1>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    text-decoration-line:
    text-decoration-style:
    text-decoration-color:


Checkout me !
h1 {
/*text-decoration: line style color; */
  text-decoration: underline solid red;
}
text-decoration (All-In-One)subject
text-decoration (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*text-decoration: line style color; */
  text-decoration: underline solid red;
  text-align:center;
}
</style>
</head>
<body>
  <h1>Checkout me !</h1>
</body>
</html>


Checkout Overflow of this text ABCDEF012345
text-overflow:
h1 {
  text-overflow:clip;
  white-space:nowrap; /*Required to overflow the text at x-axis*/  
  overflow-y:hidden;
  width:300px;
}
text-overflowsubject
text-overflowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  text-overflow:clip; /*Default*/
  white-space:nowrap; /*Required to overflow the text at x-axis*/  
  overflow-y:hidden;
  width:300px;
  margin:auto;
}
</style>
</head>
<body>
  <h1>Checkout Overflow of this text ABCDEF012345</h1>
</body>
</html>


Checkout text shadow !
Propertyxyblur-radiuscolor
text-shadow:
h1 {
/*text-shadow: x y blur-radius color*/
  text-shadow: 5px 5px 5px red;
}
text-shadowsubject
text-shadowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
/*text-shadow:x y blur-radius color*/
  text-shadow:5px 5px 5px red;
}
</style>
</head>
<body>
  <h1 style="text-align:center;">Checkout text shadow !</h1>
</body>
</html>
/*Multiple text-shadow syntax*/
  text-shadow: x1 y1 blur-radius1 color1, ....., xN yN blur-radiusN colorN;



It will only change the bottom or last line of the sentence or text
text-align-last:

Use it with text-align:justify to justify full sentence or text

h1 {
  text-align: justify;
  text-align-last:auto; /*Default*/
  width:300px;
}
text-align-lastsubject
text-align-lastclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  text-align: justify;
  text-align-last:auto; /*Default*/
  width:300px;
  margin:auto;
  background:pink;
}
</style>
</head>
<body>
  <h1>It will only change the bottom or last line of the sentence or text</h1>
</body>
</html>

I am affected by word-wrap. ABCDEFGHIJKLMNOPQRSTUVWXYZ0123


I am affected by word-break. This-line-will-break-at-hyphens-if-normal-break-at-any-latter-if-break-all-else-keep-all

#wrap{word-wrap:break-word;}
#break{word-break:normal;}
p{width:200px;}
Extra Propertiessubject
Extra Propertiesclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
  #wrap{word-wrap: break-word;}
  #break{word-break: normal;}
  p{width:200px;margin:auto;}
</style>
</head>
<body>
  <p style="background-color: lightgreen;" id="wrap">I am affected by <b>word-wrap</b>. ABCDEFGHIJKLMNOPQRSTUVWXYZ0123</p><br>
  <p style="background-color: pink;" id="break">I am affected by <b>word-break</b>. This-line-will-break-at-hyphens-if-if-<b>normal</b>-break-at-any-latter-if-<b>break</b>-<b>all</b>-else-<b>keep</b>-<b>all</b></p>
</body>
</html>
  • label_outlineTryout more
    PropertiesValues
    word-wrap:
    word-break:
    • normal values above are browser default


text 1

text 2

writing-mode:

Only Mozilla browser Supports this property values right now

div{
  writing-mode:horizontal-tb;
  width:300px;
  margin:auto;
  border:2px solid black;
}
writing-modesubject
writing-modeclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
div{
  writing-mode:auto;
  width:300px;
  margin:auto;
  border:2px solid black;
}
p{
  border:2px solid red;
  margin:2px;
}
</style>
</head>
<body>
  <div>
    <p>text 1</p>
    <p>text 2</p>
  </div>
</body>
</html>

  • CSS3 Font
❮ Prev Box Shadow
Next ❯CSS3 Font
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯