布局

Overflow 溢出

溢出裁剪、滚动与单行省略。

单行截断

很长很长很长很长很长很长的单行文本会被省略号截断

<div class="pvs-w-48 pvs-p-2 pvs-border pvs-truncate">很长很长很长很长很长很长的单行文本会被省略号截断</div>

滚动区域

可滚动

更多行…

底部

<div class="pvs-overflow-auto pvs-border pvs-p-2" style="max-height:5rem">
  <p class="pvs-m-0">可滚动</p>
  <p class="pvs-m-0 pvs-mt-4">更多行…</p>
  <p class="pvs-m-0 pvs-mt-4">底部</p>
</div>

裁剪溢出

卡片图、圆角容器常配 pvs-overflow-hidden。

溢出被裁

<div class="pvs-w-40 pvs-overflow-hidden pvs-border pvs-rounded-md" style="--pvs-radius-md:0.5rem">
  <div class="pvs-p-4 pvs-bg-primary" style="color:#fff;margin:-1rem">溢出被裁</div>
</div>

多行截断

排版类 pvs-line-clamp-2（见基础 · 排版）。

多行摘要会被收成两行并显示省略号，适合列表副标题与卡片说明文字。

<p class="pvs-m-0 pvs-line-clamp-2 pvs-border pvs-p-2 pvs-w-48">多行摘要会被收成两行并显示省略号，适合列表副标题与卡片说明文字。</p>

横向溢出

很长的不换行代码或表格横向滚

<div class="pvs-overflow-x-auto pvs-border pvs-p-2" style="max-width:12rem">
  <code style="white-space:nowrap">很长的不换行代码或表格横向滚</code>
</div>

响应式

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

md 起取消截断

<p class="pvs-truncate md:pvs-overflow-visible pvs-border pvs-p-2 pvs-w-40">md 起取消截断</p>

类名速查

类	样式
`pvs-overflow-hidden`	overflow: hidden
`pvs-overflow-auto`	overflow: auto
`pvs-overflow-x-auto`	横向滚动
`pvs-truncate`	单行 ellipsis
`pvs-line-clamp-*`	多行截断（排版）