<article>
  <div>
    <p>
      今すぐダウンロード<br>
      <span id="one-line">今すぐダウンロード</span>
    </p>
  </div>
</article>
body {
  background-color: #e1e1e1;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}

article {
  width: 80vw;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #fff;

  div {
    padding: 15px 0;
    
    p {
      font-size: 10vw;
      
      span#one-line {
        transform-origin: left top;
        white-space: nowrap;
        display: inline-block;
      }
    }
  }
}
View Compiled
const element = document.getElementById("one-line");
const parent = element.parentNode;

const element_width = element.clientWidth;
const parent_width = parent.clientWidth;

if (element_width > parent_width) {
    element.style.transform = "scaleX(" + parent_width / element_width + ")";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.