08-17-2023, 01:22 AM
Why does the text inside my <h1> tag exceed its container's width and overflow to the next line? I want the text to stay within the container without any overflow. Here's my HTML and CSS code:
HTML:
CSS (styles.css):
I expected the <h1> text to automatically adjust its size to fit within the container's width, but it overflows. How can I ensure the text stays within the container and doesn't overflow?
HTML:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Website with a Long Title</h1>
</div>
</body>
</html>CSS (styles.css):
Code:
.container {
width: 300px;
border: 1px solid #ccc;
padding: 20px;
}
h1 {
font-size: 24px;
margin: 0;
padding: 0;
}![[-]](https://www.degreeforum.net/mybb/images/collapse.png)