来来来,先给大家看一段代码
<!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>
效果图
我觉得有点mmp的感觉,自己积累太少!!!!