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

阅读更多

扫码向博主提问

子宁爱码仕

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • 全栈
  • PHP
  • JS
  • 小程序
  • Android
去开通我的Chat快问
个人分类: 前端知识库
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭