![CSS Tutorial](https://www.tutorialspoint.com/css/images/css-mini-logo.jpg)
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS3 - Text
CSS3 contained several extra features, which is added later on.
- text-overflow
- word-wrap
- word-break
There are following most commonly used property in CSS3 −
Sr.No. | Value & Description |
---|---|
1 | text-align-last Used to align the last line of the text |
2 | text-emphasis Used to emphasis text and color |
3 | text-overflow used to determines how overflowed content that is not displayed is signaled to users |
4 | word-break Used to break the line based on word |
5 | word-wrap Used to break the line and wrap onto next line |
Text-overflow
The text-overflow property determines how overflowed content that is not displayed is signaled to users. the sample example of text overflow is shown as follows −
<html> <head> <style> p.text1 { white-space: nowrap; width: 500px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.text2 { white-space: nowrap; width: 500px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <b>Original Text:</b> <p> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>Text overflow:clip:</b> <p class = "text1"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>Text overflow:ellipsis</b> <p class = "text2"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </body> </html>
It will produce the following result −
CSS3 Word Breaking
Used to break the line, following code shows the sample code of word breaking.
<html> <head> <style> p.text1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.text2 { width: 140px; border: 1px solid #000000; word-break: break-all; } </style> </head> <body> <b>line break at hyphens:</b> <p class = "text1"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> <b>line break at any character</b> <p class = "text2"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p> </body> </html>
It will produce the following result −
CSS word wrapping
Word wrapping is used to break the line and wrap onto next line.the following code will have sample syntax −
p { word-wrap: break-word; }