英文无空格换行

最新推荐文章于 2020-12-22 12:18:43 发布

天空影

最新推荐文章于 2020-12-22 12:18:43 发布

阅读量490

点赞数

分类专栏：大前端-html/css 文章标签： css

本文链接：https://blog.csdn.net/jx950915/article/details/78156635

版权

大前端-html/css 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

来来来，先给大家看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel = "Shortcut Icon" href="../img/fav.ico">
    <title>英文无空格换行</title>
    <style media="screen">
        .pre{
            width:200px;
            margin:20px 100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="pre">
        <p>Agreatbenefittotellthetruthisthatthere’snoneedtorememberwhatyouhavesaid.Loveapersoninthenameoffriendship</p>
    </div>
    <div class="pre">
        <p>A great benefit to tell the truth is that there’s no need to remember what you have said. Love a person in the name of friendship</p>
    </div>
</body>
</html>

效果图

这里写图片描述

我就觉得有毛病！！！，这是项目中一个消息聊天出现的小bug，当全部输入英文并且不换行的情况下就出现了上面这种情况，然后当时懵的一比。

解决方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel = "Shortcut Icon" href="../img/fav.ico">
    <title>英文无空格换行</title>
    <style media="screen">
        .pre{
            width:200px;
            margin:20px 100px;
            border:1px solid red;
        }
        /*划重点了啦啦啦啦啦啦啦*/
        .pres{
            white-space: pre-line;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="pre">
        <p>Agreatbenefittotellthetruthisthatthere’snoneedtorememberwhatyouhavesaid.Loveapersoninthenameoffriendship</p>
    </div>
    <div class="pre">
        <p>A great benefit to tell the truth is that there’s no need to remember what you have said. Love a person in the name of friendship</p>
    </div>
    <div class="pre pres">
        <p>Agreatbenefittotellthetruthisthatthere’snoneedtorememberwhatyouhavesaid.Loveapersoninthenameoffriendship</p>
    </div>
</body>
</html>