处理长内容和短内容longcontentoverflow-wrap用于表示当无法拆分的字符串太长而无法填满换行框时，为防止溢出，浏览器允许分词换行。硬换行：实际换行是在文本的断点处插入的软换行：文本实际上仍在同一行，但看起来被分成几行。word-break-all：break-all让长英文单词属于软换行~~~~overflow-wrap属性是一个word-wrap属性，参数：normal|中断词|浏览器保持默认处理)break-word:把一个长词换行或者放在一个URL地址里面，不管这个词的完整性。anywhere：anywhere和break-word的异同一般情况下，anywhere和break-word的表现是一样的，即如果行中没有其他可以接受的断点，就可以把原本不能断的字符断在在断点处不插入连字符的任何点字符串（例如长词或URL）。（连续的英文字符可以不break继续，如果不行就break，所以和break-all相比可能是blank。）anywhere和break-word的区别是overflow-wrap:anywhere计算的是minimumcontent大小会考虑软换行，但overflow-wrap:break-word不会考虑软换行。Hyphens用于告诉浏览器如何使用连字符连接中华航空中的单词。它可以完全阻止连字符的使用，也可以控制浏览器什么时候使用它，或者让浏览器决定什么时候使用它。.element{hyphens:auto;}文本截断处理截断是指在句子末尾添加点号，表示文本内容较多。.element{空白：nowrap;溢出：隐藏；text-overflow:ellipsis;}多行文本截断处理如果要截断多行，可以使用line-clamp属性。.element{显示：-webkit-box；-网络线夹：3；//指定最大截断行数~~~~-webkit-box-orient:vertical;overflow:hidden;}如果给元素加上padding，很容易失败，导致显示下一行的一部分（应该被截断）。水平滚动截断或连接一个词，使代码换行显示，达不到预期的效果。溢出包装：中断词；溢出-x：自动；//水平滚动短内容设置最小宽度min-width用例和示例配置文件卡片/*1*/.element{text-overflow:ellipsis;空白：nowrap；溢出：隐藏；~~~~}/*2*/.element{显示：-webkit-box；-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}当导航项处理多语言布局时，内容长度会发生变化。为导航项设置最小宽度是个好主意。文章内容中的长词或链接溢出导致横向滚动后，可以使用governflow-wrap或hyphens补充contentwidth属性参数：fill-available自动填充剩余空间。当div没有任何样式时，浏览器会自动将呈现的样式填充为100%宽度的样式。max-content和min-content是会跟随固定宽度的最大和最小宽度，不会收缩。fit-content可以在保持原有块级状态的同时实现元素收缩的效果，所以可以使用margin:auto来实现元素向内自适应的居中效果。本文仅为学习记录。
