CSS Text Effects

CSS Text Effects


CSS Text Effects 
Basically we study the following four topic in text effect - 
  1. text-overflow
  2. word-wrap
  3. word-break
  4. writing-mode
These above four mentioned are shown with examples given below  -
1. Text Overflow
The text-overflow property deals with how overflowed content should be signaled to users.
It also has three values given below -

a. Hidden 

b. Visible

c. ellipsis 

Example - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
p.one {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.two {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
p.three {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}
.three:hover {
  overflow: visible;
}
  </style>
</head>

<body>

  <p class="one">Lorem, ipsum dolor sit amet consectetur adipis


 
icing elit. Accusantium, magnam.</p>
<p class="two">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, dicta.</p>
<p class="three">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, dicta.</p>

</body>

</html>
Output - 
2. Word Wrap -
This property shows text to the next line when broken by boundary.
But when the word is larger than the boundary it splits the word.
Example - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
p.one {
  width: 100px;
  border: 1px solid #000000;
  word-wrap: break-word;
}
  </style>
</head>

<body>

  <p class="one">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium, magnaml .</p>


</body>

</html>
Output -
3. Word Break - 
It breaks the word break the word at any character so the result is too difficult to difficulty in reading.
Example -
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
p.one {
  width: 100px;
  border: 1px solid #000000;
  word-wrap: break-word;
}
p.two {
  width: 100px;
  border: 1px solid #000000;
  word-break: keep-all;
}
  </style>
</head>

<body>

  <p class="one">Lorem, ipsum dolor sit amet consectetur adipisicinddddddddddddddddffdg.</p>
  <p class="two">Lorem, ipsum dolor sit amet consectetur adipisicinddddddddddddddddffdg.</p>


</body>

</html>
Output - 
4. Writing Mode- 
Specifies whether text will be vertical of horizontal
Example - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
p.one {
  writing-mode: horizontal-tb;
}

p.two {
  writing-mode: vertical-rl;
}

p.three {
  writing-mode: vertical-rl;
}
  </style>
</head>

<body>

  <p class="two">Lorem, ipsum dolor sit amet consectetuelit..</p>
  <p class="one">Lorem, ipsum dolor sit amemet..</p>

  <p class="three">Lorem, ipsum dolor sit amet consecpisicing..</p>


</body>

</html>
Output -