html - Safari: White-space: nowrap makes my container gain 2px in width -
this straight forward issue has been driving me insane. want make ellipsis work on span
element inside button
element.
the ellipsis works, see 3 dots, when apply code, button 'gains' 2 px in width , whole layout of element gone.
this html struture:
<button type="button"> <div> <span class="ellipsis-20">offer</span> <span class="ellipsis-20"><%= promotion.promotion_list %></span> </div> </button>
my css span
:
.ellipsis-20 { .multilineellipsis(20px, 1); } .multilineellipsis(@lineheight: 20px, @linecount: 1) { width: 100%; line-height: @lineheight; max-height: @lineheight * @linecount; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
if remove white-space: nowrap;
, width gone, don't see 3 dots. tried adding calc(100% - 2px)
, got same result. know of fix, specifically, safari can point me in right direction?
edit: span
has display: inline-block
well
Comments
Post a Comment