Page 1 of 1

CSS Text Effects

Posted: Fri Oct 27, 2023 8:24 am
by Guest
CSS Text Effects


CSS Text Overflow, Word Wrap, Line Breaking
Rules, and Writing Modes
In this chapter you will learn about the following properties:

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


CSS Text Overflow
The CSS text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user.
It can be clipped:
This is some long text that will not fit in the box
or it can be rendered as an ellipsis (...):
This is some long text that will not fit in the box
The CSS code is as follows:

Example

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; }
Try it Yourself »

The following example shows how you can display the overflowed content when hovering over the element:

Example

div.test:hover {  overflow: visible;}
Try it Yourself »








CSS Word Wrapping
The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. 
If a word is too long to fit within an area, it expands outside:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
The CSS code is as follows:

Example
Allow long words to be able to be broken and wrap onto the next line:

p {  word-wrap: break-word;}

Try it Yourself »


CSS Word Breaking
The CSS word-break property specifies line breaking rules.
This paragraph contains some text. This line will-break-at-hyphens.
This paragraph contains some text. The lines will break at any character.
The CSS code is as follows:

Example

p.test1 {  word-break:
keep-all;}p.test2 {  word-break:
break-all;}

Try it Yourself »


CSS Writing Mode
The CSS writing-mode property specifies
whether lines of text are laid out horizontally or vertically.
Some text with a span element with a vertical-rl writing-mode.
The following example shows some different writing modes:

Example

p.test1 {  writing-mode: horizontal-tb; }span.test2 {  writing-mode: vertical-rl; }p.test2 {  writing-mode:
vertical-rl; }
Try it Yourself »



Test Yourself With Exercises

Exercise:
Specify that the overflowed content for the <p> element should be signaled with an ellipsis (...).


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

<body>
<p>
This paragraph contains a very long word: supercalifragilisticexpialidocious.
</p>
</body>



Submit Answer »
Start the Exercise



CSS Text Effect Properties
The following table lists the CSS text effect properties:


Property
Description


text-justify
Specifies how justified text should be aligned and spaced


text-overflow
Specifies how overflowed content that is not displayed should be signaled to the user


word-break
Specifies line breaking rules for non-CJK scripts


word-wrap
Allows long words to be able to be broken and wrap onto the next line


writing-mode
Specifies whether lines of text are laid out horizontally or vertically















+1

Reference: https://www.w3schools.com/css/css3_text_effects.asp