CSS text ellipsis
How to use text ellipsis?
Text ellipsis is the overflow of the content-this is the indicator for the user that know here hide extra content. CSS text ellipsis works with white-space : nowrap & overflow : hidden property this is mandatory. where required also need the width.
What is the default value of text ellipsis?
clip is the default value of the text – overflow.
Text-overflow has a string value that you can set as a customize dotted. but this value only supports on the firefox in current time .
Text ellipsis example: View Demo
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
font-family: arial, sans-serif;
}
main {
margin: 50px auto;
max-width: 600px;
}
.anything1 {
color: #fff;
background: #0bf;
width: 300px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: clip;
text-overflow: clip;
margin-bottom: 30px;
padding: 10px;
}
.anything2 {
color: #fff;
background: #0bf;
width: 300px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
margin-bottom: 30px;
padding: 10px;
}
.anything3 {
color: #fff;
background: #0bf;
width: 300px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: "----";
text-overflow: "----";
margin-bottom: 30px;
padding: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
td,th {
border: 1px solid #ccc;
padding: 5px 10px;
text-align: left;
}
tr:nth-child(odd) {
background: #eee;
}
td:nth-of-type(3) {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<main>
<div class="anything1">Text overflow clip, Text overflow clip, Text overflow clip, </div>
<div class="anything2">Text overflow ellipsis, Text overflow ellipsis, Text overflow ellipsis, </div>
<div class="anything3">Text overflow custom, Text overflow custom, Text overflow custom, </div>
<table>
<tr>
<th>Sr.</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>1</td>
<td>Sheo</td>
<td>dummy text address dummy text address</td>
</tr>
<tr>
<td>2</td>
<td>Rajendra Kumar</td>
<td>dummy text address dummy text address</td>
</tr>
<tr>
<td>3</td>
<td>Raj Kumar</td>
<td>dummy text address dummy text address</td>
</tr>
</table>
</main>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.