CSS Make Block Next Line Without 100% Width

Jul 26, 2021

Use display: block; (this alone will cause width to be 100%) with width: max-content;.

<div>  <span class="bg">Block 1</span>  <span class="bg">Block 2</span>  <span class="bg newline">New Line</span></div>

.bg {  background-color: #ccc;  margin: 1rem;}.newline {  display: block;  width: max-content;}

NOTE: width: max-content; browser support

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.

Tags