div内英文不换行问题以及解决方案

news2024/9/21 20:53:11

div内英文不换行问题以及解决方案

div盒子中文字换行问题：
- div中放中文的代码：
- div中放英文的代码：
解决办法
注意

div盒子中文字换行问题：

div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行

div中放中文的代码：

   <style> 
      div{
        width: 200px;
        height: 200px;
        color: #fff;
        background-color: pink;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
      }
    </style>
    <body> 
   <div>
    人最宝贵的东西是生命，生命对人来说只有一次.因此，
    人的一生应当这样度过:当一个人回首往事时，不因虚度年华而悔恨，
    也不因碌碌无为而羞愧;这样，在他临死的时候，
    能够说,我把整个生命和全部精力都献给了人生最宝贵的事业
   </div>
</body>

效果：
请添加图片描述

div中放英文的代码：

  <style> 
      div{
        width: 200px;
        height: 200px;
        color: #fff;
        background-color: pink;
        padding: 10px;
        border-radius: 5px;
        margin: 0 auto;
      }
    </style>
    <div>
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </div>

效果(不会自动换行)：请添加图片描述

解决办法

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        div{
            width: 30px;
            /* height: 30px; */
            border: 1px solid black;
            margin-top: 20px;
        }
        /*只对英文起作用，以字母作为换行依据*/
        .p1 {
            word-break: break-all;
            width: 150px;
        }

        /*--只对英文起作用，以单词作为换行依据*/
        .p2 {
            word-wrap: break-word;
            width: 150px;
        }

          /*只对中文起作用，强制换行*/
        .p3 {
            white-space: pre-wrap;
            width: 150px;
        }

       /*强制不换行，都起作用*/
        .p4 {
            white-space: nowrap;
            width: 10px;
        }

        /*不换行，超出部分隐藏且以省略号形式出现*/
        .p5 {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
        }

        
       
    </style>
</head>

<body>
    <div class="p1">hello world hello world hello world hello world hello world</div>
    <div class="p2">hello world hello world hello world hello world hello world</div>
    <div class="p3">hello world hello world hello world hello world hello world</div>
    <div class="p4">hello world hello world hello world hello world hello world</div>
    <div class="p5">hello world hello world hello world hello world hello world</div>

</body>

</html>