Ads Top

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:

Copyright Reserved to Anything Learn. Powered by Blogger.