部分常用代码片段
CSS
文本溢出省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;记得限制好外部容器的宽度。
文本两端对齐
text-align: justify;
text-justify: auto;
overflow-wrap: break-word;如果屏幕比较窄而且长单词多，就不要用这个。
文字提示（Tooltip）
span::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
top: calc(100% + 0.5rem);
padding: 0.25rem 0.75rem;
display: flex;
border-radius: 0.25rem;
color: #ffffff;
background-color: #181818;
white-space: nowrap;
transform: translateX(-50%);
}<span data-tooltip="Hello"> CSS Tooltip </span>别忘了把父元素的位置设置成 position: relative; 。
CSS 变量字体
--font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-sans: 'Inter', -apple-system, 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Source Han Sans',
'Noto Sans SC', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, var(--font-emoji);
--font-serif: 'Source Han Serif SC', 'Source Han Serif', 'Noto Serif SC',
'Noto Serif', Georgia, 'Times New Roman', Times, 'Droid Serif', serif, var(--font-emoji);
--font-mono: 'JetBrains Mono', 'Fira Mono', Consolas, 'Courier New',
'Droid Sans Mono', var(--font-sans);HTML
外链模板
<a target="_blank" rel="noopener noreferrer"></a>
<a target="_blank" rel="noopener noreferrer nofollow"></a>Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&family=JetBrains+Mono:wght@500;700&family=Noto+Sans+SC:wght@500;700&display=swap"
rel="stylesheet"
/>Git
新建空白分支
git checkout --orphan gh-pages
git rm -rf .通常用来新建一个分支，存放文档官网等文件，GitHub Pages 就是这样做的。
书签
在浏览器地址栏粘贴并进入后，可以直接添加为书签。
单纯的记事本
data:text/html, <html contenteditable>