布局与交互系列
在实际操作中,时常会遇到一些任务表,清单之类的列表,涉及到块元素与内容的关系。今天我们来讲讲布局:块元素内容超长的处理与显示:
代码
<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;//将边框放进内容里。边框从无到有,常常会使得文件内容被挤动,可以预先设置好透明颜色的边框。