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

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

组件

在用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;
}

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

我来解答赞 1 收藏

反馈

1 条解答

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