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