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

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

原创最新推荐文章于 2023-11-25 15:51:56 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

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

11 篇文章

订阅专栏

本文介绍了在HTML中如何使长单词或长串字符自动换行的方法，通过使用CSS属性word-wrap和word-break，可以有效地避免内容超出显示区域。

转自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>