In this section, you’ll explore the following properties:
The CSS text-overflow property determines how content that overflows and is not visible should be indicated to the user.
It can be clipped:
or it can be displayed as an ellipsis (…):
The CSS code appears 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; } |
Below is an example demonstrating how overflowed content can be displayed when hovering over the element:
Example
| div.test:hover { overflow: visible; } |
The CSS word-wrap property enables long words to break and wrap onto the next line when necessary.
If a word exceeds the available space, it extends beyond the boundary.
The word-wrap property enables text wrapping even if it entails breaking a word in the middle.
Here is the CSS code:
Example
Allow long words to break and wrap onto the next line.
|
p { |
CSS Word Breaking
The CSS word-break property determines the rules for breaking lines.
Here is the CSS code:
Example
| p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; } |
The CSS writing-mode property determines the orientation of text lines, specifying whether they are laid out horizontally or vertically.
Below, you’ll find an example showcasing various writing modes.
Example
|
p.test1 { |
