基础

Typography 排版

字号、字重、对齐、行高、截断等排版原语；标题组件见标题 Heading。

字号尺度

pvs-text-sm · 辅助说明

pvs-text-base · 正文

pvs-text-lg · 小标题

pvs-text-xl · 强调

<div class="pvs-stack pvs-gap-2">
  <p class="pvs-m-0 pvs-text-sm">pvs-text-sm · 辅助说明</p>
  <p class="pvs-m-0 pvs-text-base">pvs-text-base · 正文</p>
  <p class="pvs-m-0 pvs-text-lg">pvs-text-lg · 小标题</p>
  <p class="pvs-m-0 pvs-text-xl pvs-font-bold">pvs-text-xl · 强调</p>
</div>

字重

normal

medium

semibold

bold

<p class="pvs-m-0 pvs-font-normal">normal</p>
<p class="pvs-m-0 pvs-font-medium">medium</p>
<p class="pvs-m-0 pvs-font-semibold">semibold</p>
<p class="pvs-m-0 pvs-font-bold">bold</p>

对齐与行高

pvs-text-center

pvs-leading-relaxed 长段落更易读的行高。

<div class="pvs-stack pvs-gap-3">
  <p class="pvs-m-0 pvs-text-center pvs-border pvs-p-2">pvs-text-center</p>
  <p class="pvs-m-0 pvs-leading-relaxed pvs-text-sm pvs-text-muted pvs-border pvs-p-2">pvs-leading-relaxed 长段落更易读的行高。</p>
</div>

装饰与大小写

pvs-uppercase

pvs-underline

pvs-line-through

<p class="pvs-m-0 pvs-uppercase pvs-text-sm pvs-text-muted">pvs-uppercase</p>
<p class="pvs-m-0 pvs-underline pvs-mt-2">pvs-underline</p>
<p class="pvs-m-0 pvs-line-through pvs-mt-2 pvs-text-muted">pvs-line-through</p>

字间距

pvs-tracking-tight

pvs-tracking-normal

pvs-tracking-wide

<div class="pvs-stack pvs-gap-2">
  <p class="pvs-m-0 pvs-tracking-tight pvs-text-lg pvs-font-semibold">pvs-tracking-tight</p>
  <p class="pvs-m-0 pvs-tracking-normal pvs-text-lg">pvs-tracking-normal</p>
  <p class="pvs-m-0 pvs-tracking-wide pvs-text-sm pvs-text-muted pvs-uppercase">pvs-tracking-wide</p>
</div>

多行截断

pvs-line-clamp-2 适合卡片摘要，超长文字收成两行省略。

<p class="pvs-m-0 pvs-line-clamp-2 pvs-border pvs-p-2 pvs-max-w-xs">pvs-line-clamp-2 适合卡片摘要，超长文字收成两行省略。</p>

无组件标题

pvs-heading-2

或用语义组件 Heading

<h2 class="pvs-heading pvs-heading-2 pvs-m-0">pvs-heading-2</h2>
<p class="pvs-m-0 pvs-mt-2 pvs-text-muted">或用语义组件 <a href="/docs/components/heading.html">Heading</a>
</p>

类名速查

类	样式
`pvs-text-sm` … `pvs-text-xl`	字号
`pvs-font-normal` … `pvs-font-bold`	字重
`pvs-text-left/center/right`	对齐
`pvs-leading-tight/normal/relaxed`	行高
`pvs-uppercase` … `pvs-capitalize`	大小写
`pvs-underline` / `pvs-line-through`	装饰线
`pvs-tracking-tight` / `pvs-tracking-wide`	字间距
`pvs-line-clamp-2` / `pvs-line-clamp-3`	多行截断
`pvs-heading` + `pvs-heading-1/2/3`	无组件标题样式

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

小屏 sm · md 起 xl

<p class="pvs-m-0 pvs-text-sm md:pvs-text-xl pvs-font-bold">小屏 sm · md 起 xl</p>