移动端滑入菜单CSS实现文本固定单行不换行问题咨询

解决方案 #

你可以通过给文本容器添加white-space: nowrap CSS属性实现强制单行显示的需求，该属性会禁用文本自动换行规则，无论容器宽度多少，所有文本都会固定在同一行渲染。

具体修改方式 #

在你现有的.navigation-menu-slide-in-10样式规则中新增一行配置即可：

.navigation-menu-slide-in-10 {
 width: 100%;
 height: 6vh;
 background-color: transparent;
 display: flex;
 justify-content: left;
 align-items: center;
 font-family: bahnschrift;
 font-size: 28px;
 font-weight: bold;
 /* 新增以下属性 */
 white-space: nowrap;
}

补充说明 #

1. 你当前的滑入菜单容器.navigation-menu-slide-in已经配置了overflow-x: hidden，所以菜单展开过程中超出宽度的文本会被自动裁剪，不会出现内容溢出容器的问题
2. 如果需要在文本未完全展示时显示末尾省略号，可以额外添加两个属性：

   .navigation-menu-slide-in-10 {
     overflow: hidden;
     text-overflow: ellipsis;
   }
   

内容的提问来源于stack exchange，提问作者Adam Dolson