CSS画0.5px 细线

Chrome把0.5px四舍五入变成了1px。用scale缩放来画0.5px

  .line {
    height: 0.5px;
    width: 200px;
    background: red;
  }

  .line {
    height: 1px;
    width: 200px;
    background: red;
    transform: scaleY(0.5)
  }

单行／多行文本溢出的省略

<code>英文单词和数字css处理不换行</code>

• 强制不换行: p { white-space:nowrap; }
• 自动换行: p { word-wrap:break-word; }
• 强制英文单词断行: p { word-break:break-all; }

1. 单行文本溢出省略号

  white-sapce: nowrap; /* 强制不换行 */
  overflow: hidden; /* 超出宽度则隐藏 */
  text-overflow: ellipsis; /* 当文本溢出时，显示省略符号来代表被修剪的文本 */

qweqweqweqweqweqwefdafdfds来了fsdfffffffdfdfdfdfdfdfdfdffffffffffffffffffddddddddddfffdfdfdfdfeqweqweqweqweqweqweqweqweqweqweqweqw

2. 两行文本溢出省略号

  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 2; /* 结合上面两个属性，表示显示的行数 */
  -webkit-box-orient: vertical;
  word-break:break-all; /* 强制换行 */
  overflow: hidden;
  text-overflow: ellipsis;

qweqweqwfdfffffdf霏霏eqw我eqweqwefdafdfds来了fsdfffffffdfdfdfdfdfdfdfdffffffffffffffffffdd震ddddddddfffdfdfdfdfeqweqweqweqweqweqweqweqweqweqweqweqw

图片自适应

  width: 100%;
  height: 100%;
  object-fit: contain;

图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。

img有个属性object-fit：fill / contain / cover / none / scale-down;

• fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。
• contain: <code>保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白</code>。
• cover: 保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。