解决长短内容
长内容
overflow-wrap
用来阐明当一个不能被离开的字符串太长而不能填充器包裹盒时，避免溢出，浏览器是否容许单词中断换行。
硬换行：在文本的换行点插入了理论换行符软换行：文本实际上仍在同一行，但看起来被分成了几行。word-break-all:break-all让长英文单词属于软换行~~~~overflow-wrap属性是word-wrap属性，参数：normal | break-word | anywherenormal:只在容许的断字点换行(浏览器放弃默认解决)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实现元素向内自适应同时的居中成果了。
本文只作为学习记录。