gpt4 book ai didi

html - 为什么这段文字会破坏 div 标签?如何解决?

转载 作者:太空宇宙 更新时间:2023-11-04 13:35:24 25 4
gpt4 key购买 nike

我只是想证明 div 的宽度和高度是合理的,文本会在里面,但我不知道为什么在这种情况下文本会在外面。为什么?如何解决?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Content Area Prototype 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="content.css" />
</head>

<body>
<div class="test"> zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</div>
</body>
</html>

这是“content.css”

* {
margin: 0;
padding: 0;
}

body {
width: 480px;
height: 680px;
margin: 0 auto;
overflow: auto-scroll;
background-color: #212121;
font-family: "Segoe UI", sans-serif;
}

.test {
padding: 0.3em;
margin-bottom: 0.5em;

background-color: #fff;
border: 0.3em solid #59922B;
border-radius: 1.2em;
}

更新:我希望文本在 div 中自动换行。溢出:隐藏不起作用。

更新:为什么不是默认的自动换行?

最佳答案

查看 word-wrap CSS 属性 ( docs )

通过将 word-wrap: break-word; 添加到 .test CSS 类,文本被限制在容器中:

http://jsfiddle.net/K9tmT/

关于html - 为什么这段文字会破坏 div 标签?如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7284827/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com