【产品】内容详情页展示优化设计

[zhaobinglong]

最优雅的字体解决方案

[zhaobinglong]

富文本编辑器

控制富文本区域内的video标签

[zhaobinglong]

记录用户上次的浏览区域

[zhaobinglong]

内容区域文本优雅的左右对齐

text-align: justify;
text-align-last: justify;

微信小程序ios系统文本无法两端对齐

[zhaobinglong]

图片image标签展示

//默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 object-fit: fill;

//保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 object-fit: contain;

//保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。 //因此，此参数可能会让替换内容（如图片）部分区域不可见 object-fit: cover;

//保持原有尺寸比例。同时保持替换内容原始尺寸大小。 object-fit: none;

//最终呈现的是尺寸比较小的那个,类似于依次设置none或contain。 object-fit: scale-dow

[zhaobinglong]

文字溢出解决

单行文字溢出

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

多行文字溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

超出内容后出现滚动条

  overflow-y:scroll

自定义多行溢出

http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html

flex布局下设置溢出没有省略号

flex: 1;/*占比，最小宽度*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

[zhaobinglong]

video封面图自动截取

poster

如果没有设置video的poster 那么在第一帧可用之前（可以简单理解为视频加载和解析完成之前）不会在video元素上显示任何图像（webkit浏览器显示为video的背景颜色，IE系列会多一个loading），之后会以视频第一帧作为海报

参考

https://www.cnblogs.com/windseek/p/12626981.html