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> Learn Software 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"> Learn Software 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"> Learn Software 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>
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"> Learn Software 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"> Learn Software 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>
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; }
No comments:
Post a Comment