TAG
CSS
JavaScript
Result
Run
License
<input type="range" id="inline-size" min="100" max="700" value="700" /> <div class="container"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div>
.container { container-type: inline-size; container-name: mycontainer; inline-size: 700px; position: relative; } .container::before, .container::after { position: absolute; } .container::before { content: ""; left: 0; right: 0; height: 1px; background-color: #FF0000; } .container::after { content: attr(data-inlinesize); left: 50%; transform: translateX(-50%); top: 30px; font-size: 50px; color: rgba(255, 0, 0, 0.7); } @container mycontainer (inline-size < 300px) { .container > p:first-of-type { color: #00FFFF; } }
window.addEventListener("load", () => { const elMyContainer = document.querySelector(".container"); const elBlockSize = document.getElementById("inline-size"); elBlockSize.oninput = e => { elMyContainer.style.inlineSize = `${e.target.value}px`; elMyContainer.setAttribute("data-inlinesize", `${e.target.value}px`); }; elBlockSize.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close