当然，目前对于多行文本的超长省略，兼容性也已经非常好了：
{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }对于一些动态内容，我们经常使用 min/max-width 或 min/max-height 对容器的高宽限度进行合理的控制。
在使用它们的时候，也有一些细节需要考虑到。
譬如经常会使用 min-width 控制按钮的最小宽度：
.btn { ... min-width: 120px; }当内容比较少的时候是没问题的，但是当内容比较长，就容易出现问题。使用了 min-width 却没考虑到按钮的过长的情况：
这里就需要配合 padding 一起：
.btn { ... min-width: 88px; padding: 0 16px }借用Min and Max Width/Height in CSS中一张非常好的图，作为释义：
这个也是一个常常被忽略的地方。
页面经常会有列表搜索，列表展示。那么，既然存在有数据的正常情况，当然也会存在搜索不到结果或者列表无内容可展示的情形。
对于这种情况，一定要注意 0 结果页面的设计，同时也要知道，这也是引导用户的好地方。对于 0 结果页面，分清楚：
数据为空：其中又可能包括了用户无权限、搜索无结果、筛选无结果、页面无数据
异常状态：其中又可能包括了网络异常、服务器异常、加载失败等待
不同的情况可能对应不同的 0 结果页面，附带不同的操作引导。
譬如网络异常：
或者确实是 0 结果：
关于 0 结果页面设计，可以详细看看这篇文章：如何设计产品的空白页面？
小小总结一下，上述比较长的篇幅一直都在阐述一个道理，开发时，不能仅仅关注正常现象，要多考虑各种异常情况，思考全面。做好各种可能情况的处理。
图片相关图片在我们的业务中应该是非常的常见了。有一些小细节是需要注意的。
给图片同时设置高宽有的时候和产品、设计会商定，只能使用固定尺寸大小的图片，我们的布局可能是这样：
对应的布局：
<ul> <li> <img src="http://placehold.it/150x100"> <p>图片描述</p> </li> </ul> ul li img { width: 150px; }当然，万一假设后端接口出现一张非正常大小的图片，上述不加保护的布局就会出问题：
所以对于图片，我们总是建议同时写上高和宽，避免因为图片尺寸错误带来的布局问题：
ul li img { width: 150px; height: 100px; }同时，给 <img> 标签同时写上高宽，可以在图片未加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。
object-fit当然，限制高宽也会出现问题，譬如图片被拉伸了，非常的难看：