开往

部分常用代码片段

本文编写于 4 年前，内容可能过时，请注意甄别

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>
CC-BY-SA-4.0