0
div {
   width: 50px;
}

span {
   display: inline-block;
}

p {
  max-height: calc(1em + 5px);
}

<div>
   <span>a</span>
   <span><p class="ellipsis">b</p></span>
</div>

It seems when ellipsis is applied to the p it calculates the width as if it were the full width of the div, rather than its width - width of a (as they are display: inline)

I can see when I inspect that it calculates the ... as if it were the full width of div. Does anyone know a workaround for this (it works for the normal cases I use it in)?

shell
  • 1,867
  • 4
  • 23
  • 39
  • 1
    in html element you dont have to use dot while giving class. Your p must read like `

    b

    `     – Furqan Aziz Jan 30 '17 at 07:38
  • You can not nest `p` into `span`, that is invalid HTML. And you should really provide a testable example, a jsfiddle or something like that. – CBroe Jan 30 '17 at 09:20

0 Answers0