CODEWITHSUNDEEP
cssfirefox
Thomas Bihan-Poudec
Thomas Bihan-Poudec

Reputation: 165

Issue Firefox text-overflow:ellipsis on child element

With a parent div and a child div

<div class="div-parent">
    <div class="div-child">
        Oportunum est, ut arbitror, explanare nunc causam.
    </div>
</div>

Using text-overflow: ellipsis on the div parent

.div-parent {
    border: solid 1px black;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.div-child {
    display: inline-block;
}

On Chrome, the text is truncated and '...' are added as wanted.

But on Firefox, the text is only truncated...

fiddle

Any Ideas ?

Upvotes: 1

Views: 115

Answers (1)

Temani Afif
Temani Afif

Reputation: 272994

I think Firefox is doing the right thing because technically the child div is set to inline-block so it will fit its content and it will overflow the parent element. So the inline-block is overflowing not the text.

You should make the child width:100% to have a text overflow and move the properties to the child div:

.div-parent {
  border: solid 1px black;
  width: 200px;
  white-space: nowrap;
}
.div-child {
  display: inline-block;
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="div-parent">
  <div class="div-child">
    Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides.
  </div>
</div>

Upvotes: 2

Related Questions