Mar 4, 2026

I am not sure if this is considered old-school or modern, but you can also use span elements to control wrapping with a good degree of precision. Toggle from display: inline to display: block as needed at media query break points. This also works well in i18n situations.

  <h1>
    <span>Modern Design.</span>
    <span>AI Enabled.</span>
    <span>Robust Tooling.</span>
  </h1>

  /* Inline until does not fit */
  h1 span {
    display: inline;
  }

  @media screen and ( max-width: 640px ) {
    /* Move last span to new line */
    h1 span:last-of-type {
      display: block
    }
  }    

  @media screen and ( max-width: 480px ) {
    /* First span on own line */
    h1 span:first-of-type {
      display: block
    }

    /* Remaining spans on second line */
    h1 span:last-of-type {
      display: inline;
    }
  }      

  @media screen and ( max-width: 375px ) {  
    /* Put all spans on new line */
    h1 span {
      display: block;
    }
  }