ellipsis line-clamp multiline

select box

HTML

<div class="featureInfo ellipsis">
    <!-- Using "<h6><a href...>" doesn't seem to work with the ellipsis -->
    <a href="#"><h6>A multi-line option that gets cut off right here and testing to see if this stuff will wrap or not. If it does work than I will shout from the rooftops. If it doesn't work I will bang my head on my desk again and question why I ever decided to write code.</h6></a>
</div>

CSS

.featureInfo.ellipsis h6 {
    font: normal 18px/22px arial, sans-serif;
    border-style:solid;
    overflow:hidden;
    display:block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding: 3px;
    margin: 0 auto;
    max-width:200px;
    text-align:center;
}
a {
    text-decoration: none;
}
/*--non web-kit browsers--*/
 .featureInfo.ellipsis a h6 {
    position:relative;
    line-height:22px;
    height:44px;
}
.featureInfo.ellipsis a h6::after {
    letter-spacing: .10em;
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding:0 10px 5px 45px;   
  
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 45%, black);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 45%, black);
    //background:url(ellipsis_bg.png) repeat-y; /*if using a bg image instead of gradients*/
}