CSS Text Effect
CSS Text Effects
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 to the user. This property work in hand with overflow css property when it comes to text.
<!DOCTYPE html>
<html>
<head>
<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;
}
div.test:hover {
overflow: visible;
}
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a heading</p>
</body>
</html>
CSS Word Wrapping and Word Break
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:
The CSS word-break property work majorly to text on a line with this property we can specifies line breaking rules.
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Effect</title>
<style>
p{
width:120px;
border:1px solid;
}
.word1 {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.word2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.word3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.word3:hover {
overflow: visible;
}
</style>
</head>
<body>
<div>
<h2>Text Overflow</h2>
<p class="word1">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Totam corrupti.</p>
<p class="word2">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. dolore. Iaquenmdm.</p>
<p class="word3"> elit. Totam corrupti, aliquam perspiciatis
sint est quae debitisgdg libero.</p>
</div>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Effect</title>
<style>
.write1 {
writing-mode: horizontal-tb;
}
.write2 {
writing-mode: vertical-rl;
}
.write3 {
writing-mode: sideways-lr;;
}
</style>
</head>
<body>
<div>
<h2>Writing Mode</h2>
<p class='write1'>Lorem ipsum <span class='write2'> dolor sit amet</span> consectetur
<span class='write2'> tempore quos!</span> </p>
<p class='write3'>adipisicing elit. Recusandae officia unde </p>
</div>
</body>
</html>
CSS Text Effect Properties
The following table lists the CSS text effect properties:
- text-align: last Specifies how to align the last line of a text
- 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
