Vant NavBar标题在手机横屏时被截断，如何自适应调整？

梦玲（打工版）提问于 2026-02-15 21:41:32 阅读 33

组件

在用Vant的NavBar做页面导航时，发现当手机横屏时标题文字会被右边的按钮挤到只剩一半显示。试过给标题加white-space: nowrap和设置固定宽度，但横屏时文字依然被截断。还尝试用flex布局调整左右按钮间距，但标题还是和返回箭头重叠了。

这是我的代码：


<van-nav-bar>
  <template #title>
    <span class="nav-title">超长标题示例文字</span>
  </template>
  <template #right>
    <van-icon name="search" size="24" />
    <van-icon name="manager-o" size="24" />
  </template>
</van-nav-bar>

对应的CSS用了：


.nav-title {
  max-width: 80vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

但横屏时标题还是被右边的图标挤到显示不全，有没有更好的适配方案？

我来解答赞 15 收藏

反馈

2 条解答

Mr.玉卿 Lv1

这个问题其实不是 CSS 能彻底解决的，Vant 的内部默认是固定宽度分配的：左边返回按钮固定宽度，右边 slot 宽度由内容撑开，中间标题区域被压得只剩一点空间，尤其横屏时右边图标多一个，中间就更惨。

你试的 max-width: 80vw 和 text-overflow 没用，是因为实际分配给标题的容器宽度本身已经被压缩到比 80vw 小很多，比如在 iPhone 横屏下可能只剩 200px 宽，再怎么 ellipsis 也撑不住。

最靠谱的方案是：自己接管布局，别用默认结构。Vant 的 NavBar 支持完全自定义内容，你可以把整个导航栏拆成三个部分，用 flex 布局手动控制：

<div class="custom-nav">

  <div class="nav-left">

    <van-icon name="arrow-left" size="20" @click="goBack" />

  </div>

  <div class="nav-title">

    <span class="nav-title-text">超长标题示例文字</span>

  </div>

  <div class="nav-right">

    <van-icon name="search" size="24" />

    <van-icon name="manager-o" size="24" />

  </div>

</div>

.custom-nav {

  display: flex;

  align-items: center;

  height: 46px; /* 跟 Vant 默认NavBar高度一致 */

  padding: 0 16px;

  background: #fff;

  box-sizing: border-box;

}



.nav-left,

.nav-right {

  flex: 0 0 auto;

}



.nav-title {

  flex: 1 1 auto;

  min-width: 0; /* 关键：允许内容被压缩 */

  display: flex;

  align-items: center;

  overflow: hidden;

}



.nav-title-text {

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  width: 100%;

}

重点是 min-width: 0 和 flex: 1 1 auto 的组合：让中间容器在空间不足时可以主动收缩（默认 flex item 的 min-width 是 auto，会阻止压缩），这样标题文字就能被正确 ellipsis。

另外建议别在标题里塞太长文字，导航栏本质上是短标题场景；如果真要展示长标题，可以考虑点击后弹出完整标题的 tooltip 或详情页。

（实测过 iPhone 14 横屏、iPad 等多端，这个方案能扛住）

2026-02-26 12:18

Mr.正利 Lv1

这个问题我之前也遇到过，Vant的NavBar在横屏时确实容易出现标题被挤掉的情况。你现在的做法已经很接近了，但还需要稍微调整一下。

我们可以利用媒体查询来动态处理横屏情况，同时给标题设置一个更灵活的宽度限制。代码可以这么改：

<van-nav-bar>

  <template #title>

    <div class="nav-title">超长标题示例文字</div>

  </template>

  <template #right>

    <van-icon name="search" size="24" />

    <van-icon name="manager-o" size="24" />

  </template>

</van-nav-bar>

对应的CSS改成这样：

.nav-title {

  flex: 1;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  padding: 0 16px; /* 给左右留点间距 */

}



@media screen and (orientation: landscape) {

  .nav-title {

    max-width: 50vw; /* 横屏时进一步限制宽度 */

  }

}

这里的关键点是用flex: 1让标题区域自动占据剩余空间，而不是固定宽度。再加上一点padding避免和图标打架。横屏时通过媒体查询把最大宽度再收紧一些，保证不会被挤出去。

另外提醒一下，记得测试不同屏幕尺寸的效果。如果右边的图标数量会变化，可能还需要动态计算宽度。不过按照这个方案，大部分场景应该都能搞定了。希望能帮到你！

2026-02-16 07:00