HTML中数字和字母不换行显示

最新推荐文章于 2023-11-25 15:51:56 发布

逐鹿之城

最新推荐文章于 2023-11-25 15:51:56 发布

阅读量553

点赞数 1

分类专栏：前端html相关文章标签： html

本文链接：https://blog.csdn.net/derkampf/article/details/78668541

版权

前端html相关专栏收录该内容

11 篇文章 0 订阅

订阅专栏

转自https://www.cnblogs.com/yiran2016/p/6169168.html

在HTML中标签中的数字和字母默认是不换行的，如果要将他们换行，在CSS中添加”word-wrap: break-word;” 即可解决 

语法：word-wrap: normal|break-word;

默认normal : 单词默认是不能断开的，长单词就会溢出
break-word : 会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句。

如果需要，词内换行使用（word-break）即可

语法：word-break:break-all;不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

例如

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>

    </style>
    <script>


    </script>
</head>

<body>
    <p style="width:20px;height:100px;background-color:#069; word-wrap: break-word;">111111111111111111111111111111111111</p>
    <p style="width:20px;height:100px;background-color:#069;">你好你好你好你好你好你好你好你好你好你好</p>
</body>
</html>