Have you ever struggled with text overflowing awkwardly in a box on your website? Fear not, fellow coder! Today, we’ll learn how to create an “elastic” text container using JavaScript. This nifty trick allows the container to automatically adjust its height based on the amount of text inside, ensuring a clean and visually pleasing layout.
Why go Elastic?
Imagine a news website where snippets of articles appear in boxes. Without an elastic container, if a snippet is too long, it might spill over, creating a messy look. With this technique, the box resizes itself to comfortably fit the text, keeping everything organized.
Building the Container Card
Let’s start with the basics. We’ll use HTML to create a simple box, like a <div>, and add our text content inside it. This could be paragraphs, headings, or any other text element.
Like this:
<h2>Elastic Card</h2> <p>Elastic text containers are a handy tool for keeping your webpages clean and user-friendly. With some basic HTML, CSS, and JavaScript, you can create dynamic containers that adapt to any amount of text, ensuring a smooth and professional look for your website. Now go forth and conquer those overflowing text woes!<p>
</div>
Styling the Box
Next, we’ll use CSS to style our box. We can define its width, padding, and any other visual details you desire. The key here is to enable “overflow” for the container. This tells the browser what to do when the content gets too big. By setting overflow: auto;, we instruct it to add scrollbars if needed.
* {
box-sizing: border-box;
}
body,
html {
height: 100%;
margin: 0;
background-color: #010101;
color: #d4d4d4;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: “IBM Plex Sans”;
font-weight: 400;
font-size: 1.2rem;
}
h2 {
margin: 0;
line-height: 150%;
font-weight: normal;
}
p {
margin: 1.5rem 0 0 0;
line-height: 150%;
}
#resizable {
width: 500px;
height: 500px;
background-color: #1d1d1d;
border-radius: 20px;
position: relative;
padding: 3rem;
box-shadow: inset 0 2px 4px rgba(225,225,225, 0.1);
}
#resizable::after {
content: “”;
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
cursor: ew-resize;
border-radius: 0 20px 20px 0;
}
#resizable p {
flex: 1;
overflow: hidden;
word-wrap: break-word;
user-select: none;
}
#resizable:hover::after {
background-color: rgba(0,100,250,0.5);
}
Making it Elastic with JavaScript
Now comes the magic! We’ll use JavaScript to monitor the content inside our box. Whenever the text changes (perhaps the user expands a summary or adds more details), JavaScript detects this and adjusts the height of the container to perfectly fit the new content.
let startX, startWidth;
document.addEventListener(“mousedown“, function (e) {
if (
e.target === resizable ||
e.target === resizable.querySelector(“:after“)
) {
startX = e.clientX;
startWidth = resizable.offsetWidth;
document.body.classList.add(“resizing“);
document.documentElement.style.cursor = “ew-resize“;
document.addEventListener(“mousemove“, resize);
document.addEventListener(“mouseup“, stopResize);
}
});
function resize(e) {
if (!document.body.classList.contains(“resizing“)) return;
const widthChange = e.clientX – startX;
const newWidth = Math.max(400, Math.min(900, startWidth + widthChange));
const adjustedHeight =
newWidth > 800
? 500 – (newWidth – 800)
: newWidth < 500
? 500 + (500 – newWidth)
: 500;
gsap.to(resizable, {
width: newWidth,
height: adjustedHeight,
duration: 0.1,
ease: “none“
});
}
function stopResize() {
document.removeEventListener(“mousemove“, resize);
document.removeEventListener(“mouseup“, stopResize);
document.body.classList.remove(“resizing“);
document.documentElement.style.cursor = “auto“;
const finalWidth = resizable.offsetWidth;
const targetWidth =
finalWidth > 800 ? 800 : finalWidth < 500 ? 500 : finalWidth;
gsap.to(resizable, {
width: targetWidth,
height: 500,
duration: 0.5,
ease: “elastic.out(1, 0.3)“
});
}
The result should look something like this:
Conclusion
Elastic text containers are a handy tool for keeping your webpages clean and user-friendly. With some basic HTML, CSS, and JavaScript, you can create dynamic containers that adapt to any amount of text, ensuring a smooth and professional look for your website.
