html - why "text-overflow: ellipsis" property of div not working for its child div -
this question has answer here:
- applying ellipsis multiline text 12 answers
css property text-overflow: ellipsis
not working on child div has class name cluster-name
.
.ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column>.cluster-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
<div class="ft-column"> <div>cluster</div> <div class="pull-left cluster-name">fqdn</div> </div>
you should give parent div width
when child overflows width trigger style.this work if give width child div hard manage parent wrapper it's better to manage parent div.
.ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; width: 20%; } .cluster-name{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
<div class="ft-column"> <div>cluster</div> <div class="pull-left cluster-name">fqdnsaxaxasxsaxsaxasxvfdvdvfvdfvfd</div> </div>
Comments
Post a Comment