CSS防御式部分整理

养成细致严谨的编程习惯，考虑多种情况！（内心OS：一定要养成这样的好习惯！！）

整合了在网上看到的一些知识点，以备不时之需。

一、单行文本太长，超出盒子。

网页的数据在开发过程中都是动态的，一切都是不确定的，造成CSS布局的效果并没有按照预期来显示。

以防万一，标题过长，可以用。。。来显示：

white-space: nowrap;  //规定段落中的文本不进行换行

overflow: hidden;

text-overflow: elipsis;  //用省略号来代表被修剪的文本

解析：

1.white-space：

处理指定元素内的空白

2.text-overflow：

当文本溢出包含它的元素时，该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。

需要配合以下两个属性使用！！！

white-space: nowarp;

overflow: hidden;

 

二、类别标签文本太长。

标签的延伸不希望过长，可以在一定的长度时就换行显示。

max-width 也有min-width

例如： max-width：60%；

三、图片拉伸或者挤压。

上传图片头像，由于用户图片的头像比例都不固定，会有压缩或挤压的可能性。

用object-fit：cover来等比例裁剪图片尺寸，但是缺点就是有一部分图片会被裁剪掉。