一些常用代码片段

整理了一些自己经常会用到,但是容易忘的代码片段,不定期更新。

CC-BY-SA-4.0

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"
/>

书签

在浏览器地址栏粘贴并进入后,可以直接添加为书签。

单纯的记事本

data:text/html, <html contenteditable>