Property | Description |
---|---|
text-overflow | Text Overflow property determines how overflowed content that is not displayed is signaled to users. |
word-break | Break the line based on word |
word-wrap | Break the line and wrap onto next line |
text-align-last | Align the last line of a text |
text-justify | Text justified should be aligned and spaced |
<html>
<head>
<title>Text Overflow</title>
<style type="text/css">
.overflow_text1 {
white-space: nowrap;
width: 300px;
border: 1px solid #0099da;
overflow: hidden;
text-overflow: clip;
}
.overflow_text2 {
white-space: nowrap;
width: 300px;
border: 1px solid #0099da;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>Normal Text:</b>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<b>Text overflow:clip :</b>
<p class="overflow_text1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<b>Text overflow:ellipsis :</b>
<p class="overflow_text2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</body>
</html>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Text overflow:clip :<html>
<head>
<title>Word Wrap</title>
<style type="text/css">
.word_wrap_text {
width:250px;
border:1px solid #0099da;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="word_wrap_text">
Lorem Ipsum is simply duuuuuuuuuuuuuummmmmmmmmmmmmmmmmmmmmmmyyyyyyyyyyyyyyyyy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</p>
</body>
</html>
Lorem Ipsum is simply duuuuuuuuuuuuuummmmmmmmmmmmmmmmmmmmmmmyyyyyyyyyyyyyyyyy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
<html>
<head>
<title>Word Breaking</title>
<style type="text/css">
.word_break_text1 {
width: 250px; border: 1px solid #0099da;
word-break: keep-all;
}
.word_break_text2 {
width: 250px;
border: 1px solid #0099da;
word-break:break-all;
}
</style>
</head>
<body>
<p class="word_break_text1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p class="word_break_text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</body>
</html>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.