This code works fine, only when the_title() text is longer and the window is small, the text wraps to the next line:

 <div class="metabox metabox--position-up metabox--with-home-link">
    <p>
    <span class="metabox__main"><?php esc_html(the_title()); ?></span>
    </p>
</div>

.metabox {
  background-color: #FAF0CA;
  border-radius: 3px;
  padding: 10px 15px;
  display: inline-block;
  margin-bottom: 20px;
  margin-top: 6px;
  box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.07);  
}
.metabox--position-up {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}
.metabox--with-home-link {
  padding: 0;
}
.metabox__main {
  padding: 10px 15px 10px 11px;  
}
.metabox p {
  margin: 0;
  font-size: 0.9rem;
  color: #a79038;
}

@media (min-width: 425px) and (max-width: 765px){
  .metabox__main {
    padding: 2px 4px 2px 2px;      
  }
}

If I change the media query to the following common solution, all the text just drops down a line instead of wrapping:

@media (min-width: 425px) and (max-width: 765px){
  .metabox__main {
    padding: 2px 4px 2px 2px;  
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
  }
}

I’ve tried quite a few solutions and nothings working, most solutions break it worse.
Would appreciate any help with this.