HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
In this chapter you will learn about the following properties
In this chapter you will learn about the following properties:
text-overflowword-wrapword-breakwriting-modeThe 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:
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;
}
The following example shows how you can display the overflowed content when hovering over the element:
div.test:hover {
overflow: visible;
}
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:
Allow long words to be able to be broken and wrap onto the next line:
p {
word-wrap: break-word;
}
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:
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
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:
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
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>
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 |