我是 HTML 和 CSS 的超級新手，我正在嘗試為作業制作一個小型網站。我還沒有走多遠，我在文字換行方面遇到了麻煩。
文本的第一行看起來很棒，我使用 20px 填充在視窗邊緣和它自己的文本之間添加了一個緩沖區。當視窗小于文本長度時就會出現問題。當文本換行到下一行時，它不遵守邊距，我不太確定如何解決這個問題或如何用搜索查詢來嘗試修復它。
這是問題的螢屏截圖： Text wrapping issue。
這是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;
}
這是 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
提前致謝！
uj5u.com熱心網友回復：
你只需要稍微改變你的CSS，因為當你將文本轉到下一行進行螢屏調整時，它無法獲得padding=20px的屬性；所以，你只需要添加 display flex。
help {
display:flex;
padding-left: 20px;
word-break: normal;
}
您選擇使用 flexbox 的原因是您想在一個方向或另一個方向上放置一組專案。當您布局專案時，您希望控制該一維中專案的尺寸或控制專案之間的間距
uj5u.com熱心網友回復：
保持文本整潔并包裹在元素內的最佳方法是使用<p> （段落）元素。此元素會自動環繞您的文本，并在其上方和下方添加一個空格。所以你可以簡單地給它一些額外的填充讓它更整潔，然后你可以輕松地保持任何段落文本正確包裝。
.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>uj5u.com熱心網友回復：
只需將幫助標簽更改為 p(paragraph) 之類的任何其他內容，如果您想將 css 用于 p 標簽，只需在 html 中給它一個類似 p 的類
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/[email protected]/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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379896.html