布局与交互系列
在实际操作中，时常会遇到一些任务表，清单之类的列表，涉及到块元素与内容的关系。今天我们来讲讲布局：块元素内容超长的处理与显示：
代码
<style type="text/css">#a{width: 100px;background: #ccc;}#b{width: 100px;background: #ccc;}</style>
<div id="a">【CSS】块元素内容超长的处理与显示——很实用，却容易遗忘/模糊的知识点（1）</div><hr><div id="b">aaaaa-aaaaaa aaaaaaaaaaaaaaaaaaa</div>
显示效果
汉字默认会自动换行，但一连串的英文会被识别为一个单词，默认不换行。
于是用
word-break:break-all;//将每个单词拆成整体
若想全部不换行
white-space: nowrap;
将过长内容的隐藏
overflow: hidden;//还能清除浮动
省略号处理
text-overflow:ellipsis;
对图片的处理
max-width:100%
边框处理
box-sizing: border-box;//将边框放进内容里。边框从无到有，常常会使得文件内容被挤动，可以预先设置好透明颜色的边框。
【CSS】块元素内容超长的处理与显示（换行 不换行 省略号 图片自适应 边框处理）——实用却易遗忘/模糊的知识点（1）
如果觉得《【CSS】块元素内容超长的处理与显示（换行 不换行 省略号 图片自适应 边框处理）》对你有帮助，请点赞、收藏，并留下你的观点哦！
