本教程操作环境：windows10系统、HTML5版、DELL G3电脑html5中的p不换行怎么办？p标签中英文换行内容问题1.数字、英文的情况p中的内容如果是英文，则会按单词（默认按空格来分隔单词）来进行换行。如果一个单词长度大于p标签
本教程操作环境：windows10系统、HTML5版、DELL G3电脑
html5中的p不换行怎么办？
p标签中英文换行内容问题
1.数字、英文的情况
p中的内容如果是英文，则会按单词（默认按空格来分隔单词）来进行换行。如果一个单词长度大于p标签的宽度。则会发生溢出。数字同理
2.中文的情况
p中的内容如果是中文，则会自动换行。即便中文中有字母或者空格（无论字母处在什么位置）。
3.使数字、英文自动换行
通过添加Word-break: break-word。可以使得数字、英文自动换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta Http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
figure {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: 20vw;
}
p {
width: 30%;
height: 20%;
}
p:nth-child(2) {
word-break: break-word
}
</style>
</head>
<body>
<figure>
<p>budapsetBund123456789456132123afhuoeaewoerhaib faFingjfllkfhabjkalshfowurhebjkfais
thecapticaljjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
</p>
<p>1111111111111111111111111111111111111111111111 22222222222222222222222222222
22222222222222222222222222
</p>
<p>
a小花花蓉儿安委办挼恩爱反驳奥委会蓉儿五把UI阿拉绒布李规格a 爱好IE容纳foe把UI老人会爸爸非哦啊啊哦环绕为比方那部分巴洛克不发货
</p>
</figure>
</body>
</html>
以上就是html5中的p不换行怎么办的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: html5中的p不换行怎么办
本文链接: https://www.lsjlt.com/news/206870.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0