how to get one span tag out of multiple to to overflow its parent

Issue

I have a highlight span that I want to sit right after the to without messing with the width of the parent. I don't want to use absolute positioning. Is it possible to have that span be aligned with the to example and overflow the parent Example:

Thank you for
your interest 
to Sign up to today's deals

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline-block;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to </span>
  <span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
 </div>
</div>

Solution

If there's no other content after the <span>, giving it width: 0 could work (but this is very similar to giving it position: absolute):

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline-block;
  width: 0;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to </span>
  <span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
 </div>
</div>

However, if you are okay to change your HTML a little bit, here's a "proper" way to do it with HTML entity ⁠. You will also have to change the display of your span to inline:

.outter {
  width: 100%;
  height: 100%;
}
.parent {
  width: 260px;
  border: 1px solid #ccc;
  overflow: visible;
  font-size: 45px;
  line-height: 60px;
}

.overflowing-span {
  white-space: nowrap;
  display: inline;
}

.highlight {
  padding: 8px;
  background-color: gray;
  border-radius: 6px;
  font-size: 35px;
}

<div class="outter">
 <div class="parent">
  <span>Thank you for your interest to</span>&NoBreak;<span class="overflowing-span">
    <span class='highlight'>Sign up to today's deals</span>
  </span>
  <span>right NOW.</span>
 </div>
</div>

Answered By - Hao Wu