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

user_1180365 0
Viewed 23

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>

css html
2 Answers

text-overflow does NOT "propagate" to block-level child elements (contrary to e.g. font-size). So you have to apply it directly to the child block-level elements where you need it:

.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">
      right right right right right right
    </div>
  </div>
</div>

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


        <span>
      <a href="#">
      right right right right right right
      </a>
      </span>
      </h6>
    </div>
  </div>
</div>

user_57243030

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>

user_152739680
Related