CSS

[Huauauaa]

省略号

一行

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

两行

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

[Huauauaa]

avoid autofill

input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 600000s 0s, color 600000s 0s;
}

[Huauauaa]

hidden scroll

scrollbar-width: none; /* Firefox */

-ms-overflow-style: none; /* IE 10+ */

::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

[Huauauaa]

dark vs light

css or js

css

body {
color: black;
background: white;
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
}
}

js

import { useEffect, useState } from "react"

export type ThemeName = "light" | "dark"

function useTheme() { const [themeName, setThemeName] = useState("light") useEffect(() => { // 设置初始皮肤 if (window.matchMedia("(prefers-color-scheme: dark)").matches) { setThemeName("dark") } else { setThemeName("light") } // 监听系统颜色切换 window .matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", (event) => { if (event.matches) { setThemeName("dark") } else { setThemeName("light") } }) }, []) return { themeName, isDarkMode: themeName === "dark", isLightMode: themeName === "light", } }

export default useTheme

[Huauauaa]

通配符 * wildcard

i[class*='icon-'] {
  font-size: 1rem;
}

i[class^='icon-'] {
  font-size: 1rem;
}

[Huauauaa]

• revert

[autelhww]

word-break

• break-all 连续的英文和数字
• keep-all 优化中文排版
• break-word 解决破折号不换行

[autelhww]

hyphens

专为英文场景设计

• 默认值：manual
• hyphens: auto 可以让英文单词断开时带上连字符

[Huauauaa]

父元素设置 border-radius 时影响子元素圆角

设置父元素 css overflow: hidden