How do I shrink this text if it spills on to a new line due to length?

63 0 3



Using debut! How do I keep the text below from starting on a new line if it gets too long for certain screens?


<div class="page-width">
<div style="width: 100%;float: left;">
      <span style="float: left;width: 33%;text-align: left;">short</span> 
      <span style="width: 33%;text-align: center;float: left;">*</span> 
       <span style="float: right;width: 33%;text-align: right;">text</span>

short | text

For isntance, if "short" and "text" are variables that may contain more characters like "longlonglonglonglonglong" and "text" may be "texttexttexttexttext" can I shrink the size of the text if it spills over on to a new line, say on mobile, or a desktop with a smaller screen? An example would be how do I shrink this so the "text..." is on the same line as "short..."


shortshortshortshortshortshortshortshortshortshortshortshortshortshort | texttexttexttexttexttexttexttexttexttexttexttext