CSS elipsis

by AntowaKartowa

HTML

<!-- 
Made by this tutorial 
http://bcreativeweb.blogspot.com/2012/10/css-ellipsis-how-to-manage-multi-line.html 
-->
<div class="more-overflow">
    <div class="more-overflow-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iusto eveniet molestias libero cupiditate quisquam dignissimos excepturi ducimus non voluptates amet voluptatum odio blanditiis ex fuga rerum ea aliquid tempore nulla fugit ipsa animi vitae dolorum. Nisi recusandae quos in magnam molestiae necessitatibus repudiandae nostrum nobis! Quam laboriosam dolorum architecto voluptatum perferendis illo culpa dolor aut rerum enim magnam consectetur autem dicta unde dolore voluptatem aliquam animi magni in et porro nobis minima mollitia. Modi labore velit aliquam illo nam distinctio itaque est culpa minus unde perspiciatis vel a at. Ducimus consequuntur delectus dolores blanditiis ipsa totam repellendus itaque iste!</div>
</div>

CSS

.more-overflow {
    position: relative;
    width: 45%;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    /* background-color: #ccc; */
    padding-right: 10px;
}

.more-overflow:before {
    content: '';
    float: left;
    height: 100%;
    width: 5px;
    /* background-color: #0c0; */
}

.more-overflow:after {
    content: '';
    position: relative;
    float: right;
    width: 0;
    height: 0;
    left: calc(100% + 10px);
    top: -14px;
    margin-left: -4px;
    padding-right: 5px;
    border: solid 4px #c00;
    border-right: none;
    border-color: transparent transparent transparent #c00;
    cursor: pointer;
}

.more-overflow-text {
    position: relative;
    float: right;
    width: 100%;
    margin-left: -5px;
}
.more-overflow-text:after {
    content: '';
    margin-left: 6px;
    display: inline-block;
    border: solid 4px #c00;
    border-right: none;
    border-color: transparent transparent transparent #c00;
    cursor: pointer;
}