CSS text-overflow ellipsis

by jorgeluis

HTML

<div class="ellipsis">This text is for testing text-overflow css in all browsers. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


<ul>
    <li class="media">
        <div class="art-wrap">
            <a class="art" href="#"><img src="http://placehold.it/100" alt=""></a>
        </div>
        <div class="meta">
            <h3><a class="title" href="#">Title points to detail page</a></h3>
            <a class="artist" href="#">Artist name</a>
        </div>
        <div class="price">123</div>
    </li>
    <li class="media">
        <div class="art-wrap">
            <a class="art" href="#"><img src="http://placehold.it/100" alt=""></a>
        </div>
        <div class="meta">
            <h3><a class="title" href="#">Very long names like this should show ellipsis at the end using the CSS text-overflow property (theoretically supported by IE6+)</a></h3>
            <a class="artist" href="#">Artist name Artist name Artist name)</a>
        </div>
        <div class="price">123</div>
    </li>
</ul>

CSS

.ellipsis {  
    white-space: nowrap;  
    overflow: hidden;  
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;  
    -o-text-overflow: ellipsis;  
}


ul {
    margin : 0 0 1.5em -24px; 
    padding-left : 24px;
    list-style-type : disc;    
}
a, a:visited {
    outline : none;
    color : #39c;
    text-decoration : none; 
}

.media {
    padding: 0 0 3px 100px;
    margin: 0 0 10px;
    border-bottom: solid 1px #eee;
    overflow: hidden;
    color: #666;
}
.art-wrap {
    position: relative; 
    overflow: hidden;
    float: left;
    width: 80px; height: 80px;
    margin: 0 0 0 -90px;
}
.art { 
    display: block;
    padding: 5px; //allows drop shadow
    color: #ccc;
    overflow: hidden; 
    font: .75em/1.1 sans-serif;
}
.art-wrap img, .art img {
    display: block;
    color: #b9b9b9;
    width: 100%;
    font-size: .75em;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

h3 {margin-bottom: .5em; }

.title, .artist {
    display: block;
    margin: .5em 0;
}
.price {
    display: block;
    font-size: .875em
}


/* media query here removed for testing */

.media {
    float: left;
    width: 33%;
    padding: 3px;
    padding-left: 85px;
    margin: 0 8px 8px 0;
     background: #f9f9f9;
    border: solid 1px #ddd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.art-wrap {
    margin: 0 0 2px -82px;
    width: 80px;
    height: 80px;
}

.meta {
    font-size: .875em;
    padding: 0 0 3px;
    line-height: 1.25;
}
.artist { display: block; }
.title, .artist {
    white-space: nowrap;  
    overflow: hidden;  
    text-overflow: ellipsis;  
    -o-text-overflow: ellipsis;  
    -ms-text-overflow: ellipsis;  
}