Trouble Wrapping Text HTML CSS
Question
I'm super new to HTML and CSS and I'm trying to make a small website for an assignment. I haven't gotten very far and I'm having trouble with text wrapping.
The first line of the text looks great, and I have used 20px padding to add a buffer between the edges of the window and the text it's self. The problem comes when the window is smaller than the length of the text. When the text wraps to the next line, it doesn't obey the margins and I'm not quite sure how to fix this or how to word a search query to try and fix it.
Here is a screenshot of the issue: Text wrapping issue.
Here is the CSS:
body {
color: white;
background-color: #131516}
.headerblock {
padding: 10px;
background-color: black;
margin-top: 0px;
margin-left: 0px;
color: #5b5b5b;
font-size: 30px;
transition: 0.2s;
box-sizing: border-box;
text-align: center;
width: 100%;
}
.headerblock:hover{
color: white;
transition: 0.2s;
}
help {
padding: 20px;
word-break: normal;
width: fit-content;
}
And here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<title>-----------------</title>
</head>
<div class="headerblock">
DEEZ NUTZ
</div>
<body>
<help>
Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage.
</help>
</body>
</html>
Thanks in advance!
3 answers
solution1
0 2021-12-13 02:50:46
You just need to change your CSS a little bit, Because when you are text going to the next line for screen resizing, it can not get the property of padding=20px; So, you just need to add display flex.
help {
display:flex;
padding-left: 20px;
word-break: normal;
}
the reason you'd choose to use flexbox is that you want to lay a collection of items out in one direction or another. As you layout your items you want to control the dimensions of the items in that one dimension or control the spacing between items
solution2
0 2021-12-13 04:37:02
Just change the tag to anything else like
and if you want to use the css for the
, jst give it a class like this.
body { color: white; background-color: #131516}.headerblock { padding: 10px; background-color: black; margin-top: 0px; margin-left: 0px; color: #5b5b5b; font-size: 30px; transition: 0.2s; box-sizing: border-box; text-align: center; width: 100%; }.headerblock:hover{ color: white; transition: 0.2s; }.h { padding: 20px; word-break: normal; width: fit-content; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <link href="styles.css" rel="stylesheet"> <title>-----------------</title> </head> <div class="headerblock"> DEEZ NUTZ </div> <body> <p class="h"> Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage. </p> </body> </html>
solution3
0 2021-12-13 06:20:45
The best way to keep text neat and wrapped inside a element is to use the <p> (paragraph) element. This element automatically wraps your text, as well as adds a space above and below it. So you can simply give it some extra padding to make it even neater, then you can easily keep any paragraph text correctly wrapped.
.help { padding: 20px; }
<p class='help'> Welcome to my webpage. This is where I post things that I want on my webpage. Anything I post will appear here on my webpage. </p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.