一.如果在li里面嵌套a标签 li设置word-wrap: break-word; a标签设置会另起一行
需要添加 word-break: break-all;强制英文单词断行
那为什么会出现这种情况
原因：
<ul class="bos">
<li>第六课：https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>5457777777 https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>sadksaldkahttps://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>数字加英文24545asd https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
</ul>
中文数字 拼接长单词（乱序的单词数字组合都会认为）会另起一行
blog.csdn.net/glorydx/art…
mdn
developer.mozilla.org/zh-CN/docs/…
总结
- word-break:break-all 到一行的末尾就断
- word-break:break-word 是将一个单词超出的部分换到下一行。
why 乱序的数字和英文 不会自动换行？
<ul class="nav" style="width: 200px; height: 300px;border: 1px solid salmon; list-style:none;padding: 0;">
<li><a herf="/">首页</li>
<li><a herf="/aboutus/">关于我们</a>
<li><a href="/products/">产品中心</a>
<li><a href="/products/">https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</a>
<li><a href="/products/">834803480238028348034802380283480348023802</a>
</ul>
word-wrap: break-word;
二. white-space: nowrap; 不换行
默认word-break:normal 长单词不会换行
三。和 word-wrap: break-word的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
style="
width: 400px;
height: 500px;
border: 1px solid springgreen;
/* word-break: break-all; */
word-wrap: break-word;
"
>
Hello,everybody.I am very happy to make a speech here.I will talk about
“Challenge myself” today. We have a lot of opponent.But our most
powerful opponent is ourselves.If we want to be successful,we should
challenge ourselves.Maybe challenging ourselves is difficult.But we should
try our best to do it.Because it can make us more powerful and grow
up.Challenge ourselves may change us a lot.Do you know Mcdermott? At the
beginning,he was a barber.Later on,he took part in the Winter Sports
Meeting.And he got the champion of skating.He challenged himself,and he
was successful. Challenging ourselves is trying all kinds of
things.Maybe we will find better ourselves in the process.And we will
learn many new skills.We are students now.We dont need to do somethitng
difficult.We just need face trouble optimistically in life.Then we will
live more happily.And we will have more chances in the future.Because we
are optimistic enough to treat all . We will be successful if we
challenge ourselves.Because we are our own most powerful opponent.Lets
challenge ourselves and get ahead. Thats all.Thanks for listening.
</div>
</body>
</html>
自动换行 word-break:break-all和word-wrap:break-word
一般这两个属性都会加上 height-auto;white-space:normal; 共同点：word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
不同点：
1.word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2.word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bos {
width: 200px;
height: 300px;
border: 1px solid #f00;
word-wrap: break-word;
}
.wrap ul {
border-radius: 4px;
color: #545454;
box-sizing: border-box;
padding: 16px;
background-color: #f3f4f5;
}
.wrap ul li {
width: 100%;
list-style: none;
margin-bottom: 12px;
/* word-break: break-all; */
/* word-break: break-word; */
}
</style>
</head>
<body>
<p class="bos">83480348023802ufjflsjfds843820483048jfdljfsl</p>
<ul class="bos">
<li>第六课：https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>5457777777 https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>sadksaldkahttps://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
<li>数字加英文24545asd https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</li>
</ul>
<div style="width: 200px; height: 300px; border: 1px solid red">
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
This is a long and Honorificabilitudinitatibus
califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
</div>
<!-- <ul class="wrap">
<li>购方名称：<span>深圳市华丰世纪企业服务有限公司</span></li>
<li>发票代码：<span style="color: #0079ff">044032200111</span></li>
<li>发票代码：<span style="color: #0079ff">044032200111</span></li>
<li>发票号码：<span>71868486</span></li>
<li>开票日期：<span>2023年8月28日</span></li>
<li>合计金额：<span>￥15.00</span></li>
<li>
点击链接查看发票：<a href="{{}}" style="margin-left: 8px"
>https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</a
>
</li>
</ul>
<ul class="nav" style="width: 200px; height: 300px;border: 1px solid salmon; list-style:none;padding: 0;word-wrap: break-word;">
<li><a herf="/">首页</li>
<li><a herf="/aboutus/">关于我们</a>
<li><a href="/products/">产品中心</a>
<li><a href="/products/">https://nnfp.jss.com.cn/IBOCDZ WE-dOBz6x</a>
<li><a href="/products/">834803480238028348034802380283480348023802</a>
</ul> -->
<!-- <ul> 有padding: 0;</ul> -->
</body>
</html>
