Text Effects in CSS:-

following this properties:-

text-overflow

word-wrap

word-break

writing-mode

CSS Text Overflow:-

The CSS text-overflow property define how overflowed content that is not displayed on HTML page,

we are code family,we are code family

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

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


<h1>Code family</h1>
<p>Code family</p>

<h2>text-overflow: clip: Code family</h2>
<p class="test1"> we are code family,we are code family</p>

<h2>text-overflow: ellipsis: Code family</h2>
<p class="test2">we are code family,we are code family</p>

CSS Word Wrapping:-

The CSS word-wrap property is allows to long words to be able to be broken and wrap onto the next line in HTML page.

<style> 
p.test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>
</head>
<body>

<h1>Code family</h1>

<p class="test"> we are code family,we are code family,we are code family</p>

CSS Word Breaking:-

The CSS word-break property is defined line breaking rules.

<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}
</style>


<h1>we are Code family</h1>

<p class="test1">we are Code family,we are Code family
,we are Code family</p>

<p class="test2">we are Code family,we are Code family,we are Code family</p>

CSS Writing Mode :-

The CSS writing-mode property defines the lines of text are laid out horizontally or vertically in css.

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

span.test2 {
  writing-mode: vertical-rl; 
}

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

<h1>we are code family</h1>

<p class="test1">we are code family</p>

<p>we are code family <span class="test2">CODE FAMILY</span> code family</p>

<p class="test2">we are code family.</p>

Text Effects in css