note

Appearance

css ​

https://shinyu0430.github.io/2021/09/21/maxwidthminwidthfitcontent/

文本换行 ​

css
white-space: pre-wrap;

文本空两个字符 ​

css
text-indent: 2em;

超出文本自动换行 ​

https://www.cnblogs.com/KillBugMe/p/13602055.html

css
word-wrap: break-word;
word-break: break-all;

超出部分隐藏 ​

https://juejin.cn/post/6844903888475144199

显示一行

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

显示两行

css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;（行数）
-webkit-box-orient: vertical;

img 崩坏 ​

html
<img src="xxx.jpg" onerror="this.style.display='none';" />

显示透明图

html
<img
  src="xxx.jpg"
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';"
/>

全局监听

js
document.addEventListener(
  "error",
  (e) => {
    if (e.target.tagName === "IMG") {
      e.target.style.display = "none";
    }
  },
  true
);

显示失败图

html
<img src="xxx.jpg" onerror="this.onerror=null;this.src='fallback.jpg';" />

注意加 this.onerror=null; 防止 fallback 图也失败时进入死循环

h5 蓝闪效果 ​

css
* {
  -webkit-tap-highlight-color: transparent;
}

IE 下的 flex ​

css
display: -ms-flexbox; /* IE */
display: flex;

-ms-flex-direction: row; /* IE */
flex-direction: row;

/* 存在差异 */
-ms-flex-align: center;
align-items: center;

justify-content: center;
-ms-flex-pack: center;

align-self: center;
-ms-flex-item-align: center;

01 ​

scss
width: 100%;
overflow: hidden;

display: -ms-flexbox;
display: flex;

.伸缩元素 {
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;

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