Center Text w/ overflow

centering text vertically with ellipses overflow

by alanjawn

HTML

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="dlink.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<div class="row my-row">
  <div class=" col-12 my-col container-w-header">
    <div class="col-12 my-col">

      <div class="ContainerSingle ">
        <div class="icon">
          <a href="http://placeholder.com"><img src="https://via.placeholder.com/72"></a>
        </div>
        <div class="labelContainer-overflow">
          <div class="row my-row align-items-center label-row">
            <div class=" col-12 my-col label-col">
              <div class="iconLabel-overflow">
                <span>
                  This is a super long label that probably is not going to fit in this little box so it overflows with an elipsis
                </span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="ContainerSingle ">
        <div class="icon">
          <a href="http://placeholder.com"><img src="https://via.placeholder.com/72"></a>
        </div>
        <div class="labelContainer-overflow">
          <div class="row my-row align-items-center label-row">
            <div class=" col-12 my-col label-col">
              <div class="iconLabel-overflow">
                <span>
                  Try changing this text to various line lengths
                </span>
              </div>
            </div>
          </div>
        </div>
        
        


      </div>
    </div>
  </div>

CSS

.my-col { 
    /* border: 3px dotted blue;  */
    padding: 0;

}

.my-row {
    /* border: 3px solid red; */

}

.label-row {
    height: 72px;
    justify-content: start;
    align-items: center!important;

}

.ContainerSingle {
    text-align: center;
    display: inline-block;
    max-height: 72px;
    vertical-align: top;
}

.icon {
    display: inline-block;
    float: left;
    margin-right: 16px;
    height: 72px;
    width: 72px;
}

.labelContainer-overflow{
    display: inline-block;
    text-align: left;
    vertical-align: top;
    min-width: 124px;
    
    
}

.iconLabel-overflow span {
    max-width:124px;
    color: #707070;
    font-size: .85rem;
    line-height: 1.15rem;
    overflow: hidden;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  
  /* <integer> values */
  -webkit-line-clamp: 4;