<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 + ")";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.