html - List height expansion related to the nested text element in Bootstrap -


i have unordered list text elements in li , expand list's height so, contain text in normally, without breaking layout. height of list elements can different, not matter.

example on fiddle.

tried such css:

ul li {     min-height:50px;     height:auto;     word-break: break-all; } 

but didn't achieve needed result.

try overflow:hidden; instead. won't break layout , list's height may vary.

ul li {    overflow: hidden;    word-break: break-all;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />  <div class="container-fluid">    <div class="map-description-wrap">      <ul class="list-group  col-md-10 col-md-offset-1">        <li class="list-group-item">          <div class="col-xs-2">map name</div>          <div class="col-xs-1">status</div>          <div class="col-xs-1">owner</div>          <div class="col-xs-3">created</div>          <div class="col-xs-3">modified</div>          <div class="col-xs-2">controls</div>        </li>        <li class="list-group-item">          <div class="col-xs-2">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>          <div class="col-xs-1">asdasd</div>          <div class="col-xs-1">asd</div>          <div class="col-xs-3">asd</div>          <div class="col-xs-3">asd</div>          <div class="col-xs-2">            <button class="btn edit-map"><span class="glyphicon glyphicon-edit"></span>            </button>            <button class="btn delete-map"><span class="glyphicon glyphicon-trash"></span>            </button>          </div>        </li>        <li class="list-group-item">          <div class="col-xs-2">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.</div>          <div class="col-xs-1">asdasd</div>          <div class="col-xs-1">asd</div>          <div class="col-xs-3">asd</div>          <div class="col-xs-3">asd</div>          <div class="col-xs-2">            <button class="btn edit-map"><span class="glyphicon glyphicon-edit"></span>            </button>            <button class="btn delete-map"><span class="glyphicon glyphicon-trash"></span>            </button>          </div>        </li>      </ul>    </div>  </div>

also example pen.