Home text-overflow: ellipsis: doesn't work when we have multiple levels of html elements in a div

Questions

text-overflow: ellipsis: doesn't work when we have multiple levels of html elements in a div

January 31, 2022

I have two div

in the first text is inside div directly and three dots we can see in the end of width (55px)

but in second ellipsis for a div doesn’t display "..." – three dots in the end of 55px
difference here is just structure of seconds div contains multiple levels h6->span->a
visual text is displayed 55px but three dots doesn’t appear at the end

any ideas?

.parent{
  width:100%;
  border: 1px solid white;
}

.left-children{
  width:50%;
  border: 1px solid black;
  float:left;
  display:inline-block;
}

.right-children{
  width:49%;
  border: 1px solid black;
  float:right;
  display:inline-block
  
}

.ellipsis-children{
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:55px
}

    <div class="parent">
      <div class="left-children">
      left
      </div>
      <div class="right-children">
      <div class="ellipsis-children">
      righ righ righ righ righ righ righ righ righ righ righ righ 
      </div>
      </div>
    </div>
    
    <div class="parent">
      <div class="left-children">
      left
      </div>
      <div class="right-children">
      <div class="ellipsis-children">
      <h6>       
      <span>
      <a href="#">
      righ righ righ righ righ righ righ righ righ righ righ righ 
      </a>
      </span>
      </h6>
      </div>
      </div>
    </div>

>Solution :

Because h6 is a block element. You make it inline then it works:

.parent {
  width: 100%;
  border: 1px solid white;
}

.left-children {
  width: 50%;
  border: 1px solid black;
  float: left;
  display: inline-block;
}

.right-children {
  width: 49%;
  border: 1px solid black;
  float: right;
  display: inline-block
}

.ellipsis-children {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 55px
}

/* ------ new rule --------------- */
.ellipsis-children h6 {
  display: inline;
}

<div class="parent">
  <div class="left-children">
    left
  </div>
  <div class="right-children">
    <div class="ellipsis-children">
      righ righ righ righ righ righ righ righ righ righ righ righ
    </div>
  </div>
</div>

<div class="parent">
  <div class="left-children">
    left
  </div>
  <div class="right-children">
    <div class="ellipsis-children">
      <h6>
        <span>
      <a href="#">
      righ righ righ righ righ righ righ righ righ righ righ righ 
      </a>
      </span>
      </h6>
    </div>
  </div>
</div>