CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Questions

What is Bootstrap CSS What is CSS used for How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language How to edit CSS in WordPress How to use google fonts in CSS How to create blinking text using CSS How to Set Space between the Flexbox Is CSS a Programming Language

Difference

Difference between HTML and CSS Grid Vs Flexbox in CSS Difference between CSS Grid and CSS Flexbox

Misc

Create a 3D text effect using HTML and CSS Hover condition for a:before and a:after in CSS Bem CSS Boder Types CSS Features of CSS Font Face CSS Image Overlay CSS B Tag CSS Carousel CSS CSS Arrow CSS Focus Flex Grow in CSS Bem CSS Features of CSS Font Face CSS

CSS Text Effects

Text Effects in CSS

We can use distinct text effects used inside the HTML document. Few attributes can be applied to insert the text effects.

We can also style various web documents that will affect distinct text with the help of CSS. The text effect properties support us in designing the text clear and attractive. We are listing some essential CSS text effect properties below:

  • word-wrap
  • word-break
  • text-overflow
  • writing-mode

Let’s explain the above properties one by one, along with an example.

word-wrap

It is applied for breaking any lengthy word and, after that, wrap towards any next line. The word-wrap attribute can be used to avoid the overflow if any unbreakable word is too lengthy to fit within any containing box.

Syntax:

word-wrap: normal| break-word| inherit ;  

Property Values

normal: It is applied to break the words at permitted breakpoints only.

break-word: This property of CSS is applied to break distinct unbreakable words.

initial: It sets this attribute to the default value.

inherit: It is used to acquire this attribute by its parent component.

Example:

<!DOCTYPE html>
<html>
<head>
<title> word-wrap property </title>
<style>
.exp
{
 width: 200px;
 border: 2px solid red;
 padding: 10px;
 font-size: 20px;
 background-color: lightgreen;
}
.exp1
{
 width: 11em;
 border: 2px solid red;
 padding: 10px;
 word-wrap: break-word;
 font-size: 25px;
 background-color: lightgreen;
}
</style>
</head>
<center>
<body>
<h1> Without, word-wrap </h1>
<p class= "exp"> We are defining a very lengthy word:
heloooooooooooooooooooooooworldddddddddddddddddddd.
</p>
<h1> With, word-wrap: break-word; </h1>
<p class= "exp1"> We are defining a very lengthy word:
heloooooooooooooooooooooooworldddddddddddddddddddd. This word is breaking and wrapping onto the next line.
</p>
</body>
</center>
</html>

Output:

CSS Text Effects

word-break

This CSS property describes how words must break at any line’s end. The rules of line break can be defined using this property.

Syntax:

word-break: normal |keep-all |  break-all | inherit ;  

Note: The normal value is its default value. Thus, it will automatically apply when we do not define the value.

Property Values

keep-all: This value is used to break any word to its default style.

break-all: This property value adds any word break among many characters to avoid any kind of word overflow.

Example:

<!DOCTYPE html>
<html>
<head>
<title> word-break: break-all; </title>
<style>
.exp
{
 width: 150px;
 border: 2px solid red;
 word-break: break-all;
 text-align: left;
 font-size: 25px;
 color: green;
}
.exp1
{
 width: 156px;
 border: 2px solid red;
 word-break: keep-all;
 text-align: left;
 font-size: 25px;
 color: green;
}
</style>
</head>
<center>
<body>
<h2> word-break: break-all; </h2>
<p class= "exp">
 Welcome to this Page.
</p>
<h2> word-break: keep-all; </h2>
<p class= "exp1">
 Welcome to this Page.
</p>
</body>
</center>
</html>

Output:

CSS Text Effects

text-overflow

It describes the illustration of overflowed content, which is invisible to any user. This CSS property indicates the user regarding the text that is invisible. It supports us to determine whether the content must be cut or display few dots (ellipsis).

Note: It does not apply by its own. We need to apply overflow: hidden; and white-space: nowrap; along with this attribute.

Syntax:

text-overflow: clip | ellipsis;  

Property Values

clip: This value is a default value. It is sued to clip the overflowed content.

ellipsis: It shows three dots (…) or ellipsis to display the clipped content. This value is shown inside the area, reducing the txt amount.

Example:

<!DOCTYPE html>
<html>
<head>
<title> text-overflow property </title>
<style>
.exp
{
 white-space: nowrap;   
 height: 30px; 
 width: 250px;                
 overflow: hidden;   
 border: 2px solid red;  
 font-size: 25px;  
 text-overflow: clip;  
}
.exp1
{
 white-space: nowrap;   
 height: 30px; 
 width: 250px;                
 overflow: hidden;   
 border: 2px solid red;  
 font-size: 25px;  
 text-overflow: ellipsis; 
}
h2
{
 color: green;
}
div:hover
{
 overflow: visible;
}
p
{
 font-size: 25px; 
 font-weight: bold; 
 color: blue; 
}
</style>
</head>
<center>
<body>
<p> Hover on the bordered content to examine the effect. </p>
<h2> text-overflow: clip; </h2>
<div class= "exp"> Hello all! Welcome to this Page </div>
<h2> text-overflow: ellipsis; </h2>
<div class= "exp1"> Hello all! Welcome to this Page </div>
</body>
</center>
</html>

Output:

CSS Text Effects

writing-mode

This property describes that the content will be specified either in vertical or horizontal direction. If the specified direction is horizontal, then it will be from right to left (vertical-rl) or from left to right (vertical-lr).

Syntax:

writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ; 

Property Values

horizontal-tb: This property value is used as default value for this property, where the content will be in the horizontal direction. It will be consider from top to bottom and left to right.

vertical-rl: This value is used to show the content in vertical direction. The content will be consider from top to bottom and right to left.

vertical-lr: This value is same as the vertical-rl, although the content will be consider from the left side to the right side.

Example:

<!DOCTYPE html>
<html>
<head>
<title> writing-mode property </title>
<style>
h2
{
 border: 2px solid navy;
 width: 300px;
 height: 100px;
}
#tb
{
writing-mode: horizontal-tb;
}
#lr
{
writing-mode: vertical-lr; 
} 
#rl
{ 
writing-mode: vertical-rl; 
} 
</style>
</head>
<center>
<body>
<h1> Illustration of writing-mode property </h1>
<h2 id= "tb"> writing-mode: horizontal-tb; </h2>
<h2 id= "lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br>
<h2 id= "rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2>
</body>
</center>
</html>

Output:

CSS Text Effects