数学、代码与媒体

这篇夹具把容易造成横向溢出的内容集中在一起。所有滚动都应限制在内容块内部。

行内与块级数学

行内公式 $E = mc^2$、概率 $P(A \mid B) = \frac{P(B \mid A)P(A)}{P(B)}$ 应与中文基线自然对齐。

块级公式：

$$\mathcal{L}(\theta) = \mathbb{E}_{(s,a)\sim D} \left[ \left( r + \gamma \max_{a'} Q_{\theta^-}(s', a') - Q_\theta(s,a) \right)^2 \right]$$

矩阵：

$$\begin{bmatrix} 1 & 0 & 0 \\ 0 & \cos\phi & -\sin\phi \\ 0 & \sin\phi & \cos\phi \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix}$$

故意很宽的表达式：

$$J(\theta)=\sum_{t=0}^{T}\gamma^t r(s_t,a_t)+\lambda_1\lVert\theta\rVert_2^2+\lambda_2\sum_{i=1}^{N}\left|\theta_i-\bar{\theta}\right|+\beta\,\mathbb{E}_{x\sim p_{\mathrm{data}}}\left[\log\left(1+\exp\left(-f_\theta(x)\right)\right)\right]$$

TypeScript 代码

type Commit = {
  id: string;
  branch: string;
  tags: readonly string[];
};

export function groupByBranch(commits: readonly Commit[]) {
  return commits.reduce<Record<string, Commit[]>>((groups, commit) => {
    (groups[commit.branch] ??= []).push(commit);
    return groups;
  }, {});
}

Python、Shell 与 JSON

def discounted_return(rewards: list[float], gamma: float) -> float:
    return sum((gamma ** step) * reward for step, reward in enumerate(rewards))

npm run verify
npm run build

{
  "canonicalRoute": "/branches",
  "legacyRedirect": "/topics → /branches",
  "status": 308
}

下面一行故意超长，代码块应横向滚动：

0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz

本地图片：横向比例

横图应限制在正文宽度内，保留比例，不发生拉伸。

本地图片：纵向比例

纵图不应超过容器宽度；在手机和桌面上都应保持完整。

图片后的普通内容

图片后继续出现文字，用于观察懒加载、布局位移与段落间距。这里还有一个 站内链接 和 inline-code-with-a-long-name()。