解决长短内容
长内容
overflow-wrap
用来阐明当一个不能被离开的字符串太长而不能填充器包裹盒时，避免溢出，浏览器是否容许单词中断换行。
硬换行：在文本的换行点插入了理论换行符
软换行：文本实际上仍在同一行，但看起来被分成了几行。word-break-all:break-all 让长英文单词属于软换行~~~~
overflow-wrap 属性是 word-wrap 属性，参数：normal | break-word | anywhere
normal: 只在容许的断字点换行 (浏览器放弃默认解决)
break-word: 在长单词或 URL 地址外部进行换行，不必思考单词的完整性。anywhere:anywhere 和 break-word 的异同
在失常状态下，anywhere 和 break-word 的体现是一样的，即如果行中没有其余可承受的断点，则能够在任何点断开本来不可断开的字符串（如长单词或 URL），并且在断点处不插入连字符。（间断的英文字符如果能够不必断就一直，如果切实不行，就断开，因而相比 break-all 可能会留白。）
anywhere 和 break-word 的不同之处
在 overflow-wrap:anywhere 计算最小内容尺寸的时候会思考软换行，而 overflow-wrap:break-word 不会思考软换行。
Hyphens
用来告知浏览器在华航是如何应用连字符连贯单词，能够齐全阻止应用连字符串，也能够管制浏览器什么时候应用，或者让浏览器决定什么时候应用。
.element{hyphens:auto;}文本截断解决
截断是指在句子的开端增加点，以表明有更多的文本内容。
.element{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}多行文本截断解决
如果要截断多个行，能够应用 line-clamp 属性。
.element{
display:-webkit-box;
-webit-line-clamp:3; // 指定截断~~~~ 的最大行数
-webkit-box-orient:vertical;
overflow:hidden;
}如果为元素增加 padding, 容易失败，导致显示下一行的一部分 (应该被截断)
程度滚动
截断或连贯一个单词，使代码折行显示，达不到想要的成果
overflow-wrap:break-word;
overflow-x:auto; // 程度滚动 短内容
设置一个最小宽度
min-width
用例和示例
集体资料卡
/* 1*/
.element{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;~~~~
}
/* 2*/
.element{
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}导航项
在解决多语言布局时，内容长度会发生变化。最好为导航项设置最小宽度。
文章内容
长单词或者链接在溢出导致程度滚动后，能够应用 goverflow-wrap 或者 hyphens
补充内容
width 属性
参数：
- fill-available 主动填满残余空间，
在 div 没有任何款式的时候，浏览器是赞找主动填充的款式出现的，就是 100%width 的款式填充的。 - max-content 和 min-content 是会追随有定宽的最大最小宽度，不会进行膨胀。
- fit-content, 能够实现元素膨胀成果同时，放弃本来的 block 程度状态，于是就能够应用 margin:auto 实现元素向内自适应同时的居中成果了。
本文只作为学习记录。