html - why "text-overflow: ellipsis" property of div not working for its child div -


this question has answer here:

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

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

reflection - How to access the object-members of an object declaration in kotlin -

php - Doctrine Query Builder Error on Join: [Syntax Error] line 0, col 87: Error: Expected Literal, got 'JOIN' -