CSS3 Text
CSS3 contained several extra features, which is added later on
There are following most commonly used property in CSS3
Values |
Description |
text-align-last |
Used to align the last line of the text |
text-emphasis |
Used to emphasis text and color |
text-overflow |
used to determines how overflowed content that is not displayed is signaled to users |
word-break |
Used to break the line based on word |
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: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Original Text:</b>
<p>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">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">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 –
Original Text:
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.
Text overflow:clip
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.
Text overflow:ellipsis
Tutorials Point originated from the idea that there exists a class of readers who re
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">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 –
line break at hyphens:
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.
line break at any character
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.
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;
}