【CSS】块元素内容超长的处理与显示（换行，不换行，省略号，图片自适应，边框处理）——实用却易遗忘/模糊的知识点（1）

布局与交互系列

在实际操作中，时常会遇到一些任务表，清单之类的列表，涉及到块元素与内容的关系。今天我们来讲讲布局：块元素内容超长的处理与显示：

代码

	<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;//将边框放进内容里。边框从无到有，常常会使得文件内容被挤动，可以预先设置好透明颜色的边框。