CSS Text Effects

CSS Text Effects
CSS Text Effects
CSS Text Effects

Hello Friends in this article we will learn about css Text Effects.

1- Text-Overflow

By Using text-overflow property  we specifies  when our text go out of div then how its looks like , hidden OR ellipsis.

Examples

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

p.ellipsis {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h1>This is the Example Of  text-overflow Property</h1>
<h2>text-overflow: clip:</h2>
<p class="clip">This is some long text that will not fit in the box</p>
<h2>text-overflow: ellipsis:</h2>
<p class="ellipsis">This is some long text that will not fit in the box</p>

2- CSS Word Wrap

By Using Word Wrap we can break long word in new line by using CSS word-wrap property.

<h1>Without Word Wrap CSS</h1>
<div class="word_wrap1">
   This is the example of word wrap, by using word wrap we can break text inside the div into next line. jdhfdjskfhsjdhfkjdsgfhkjdsfhdskjhfjdskfhsdjfhdjfhsdkjhfkjdfhsdkfj
</div>

<h1> With Word Wrap CSS</h1>
<div class="word_wrap">
   This is the example of word wrap, by using word wrap we can break text inside the div into next line.<strong>jdhfdjskfhsjdhfkjdsgfhkjdsfhdskjhfjdskfhsdjfhdjfhsdkjhfkjdfhsdkfj</strong>
</div>

body
{
	background:#f2f2f2;
}

h1
{
	font-size:18px;
}

.word_wrap {
 width:300px;
 height:100px;
 border:1px solid #333;
 word-wrap: break-word;
}

.word_wrap1 {
 width:300px;
 height:100px;
 border:1px solid #333;
}

3- CSS Word Breaking

By Using word-break css property we can set the line break rules.

body{background:#f2f2f2;}
h1{font-size:18px;}
.demo1
{
  width: 180px; 
  border: 1px solid #000000;
  word-break: keep-all;
  float:left;
}

.demo2
{
  width: 180px; 
  border: 1px solid #000000;
  word-break: break-all;
  float:left;
  margin-left:10px;
}

<h1>The word-break Property</h1>
<div class="demo1">This is the example of word breaking keep all Examples.in This Text Break By Word </div>
<div class="demo2">This is the example of word breaking break all Examples. in this text break by text where div end</div>

Leave a Reply

Your email address will not be published. Required fields are marked *