移动端导航栏公司名称溢出背景问题的解决咨询

我在导航栏内展示了城市名称和公司名称，桌面端显示效果如下：

用于显示城市名称和公司名称的核心代码：

<body style="background-color:cadetblue">
         <header>
                <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
                    <div class="container-fluid">
                        <span class="navbar-brand" style="display:flex;">
                            <a href="https://www.test.com/">
                                <img src="~/Img/test.png" alt="AJY" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
        
                            </a>
                            <span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Testing</span><br />THIS IS TESTING TESTING TESTING</span>
                            
                        </span>
                        <a href="https://www.test.com/">
                            <img src="~/img/home-icon-white.png" alt="Home" width="30" height="30" class="d-inline-block align-middle mr-2" runat="server" />
                        </a>
                    </div>
                </nav>
            </header>
    </body>

但在移动端查看时，效果如下：

可见公司名称末尾部分溢出了#264653深蓝色背景，进入了cadetblue区域。我希望移动端时整个名称都显示在深蓝色背景内，曾尝试将公司名称放入设置width:100%的span标签，但未解决问题，尝试的代码如下：

<span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Testing</span><br /><span style="width:100%">THIS IS TESTING TESTING TESTING</span>THIS IS TESTING TESTING TESTING</span>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] Package</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></script>


    @*<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>*@
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />



</head>
<body style="background-color:cadetblue">
    <header>
        <nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; ">
            <div class="container-fluid">
                <span class="navbar-brand" style="display:flex;">
                    <a href="https://www.test.com/">
                        <img src="~/Img/test.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />

                    </a>
                    <span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Testing</span><br />THIS IS TESTING TESTING TESTING</span>
                    
                </span>
                <a href="https://www.test.com/">
                    <img src="~/img/home-icon-white.png" alt="Home" width="30" height="30" class="d-inline-block align-middle mr-2" runat="server" />
                </a>
            </div>
        </nav>
    </header>
    <div class="container-bg">
        <div class="container">
            <main role="main" class="pb-5">
                @RenderBody()
            </main>
        </div>
    </div>


    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

代码在桌面端显示正常，但移动端查看时“THIS IS TESTING TESTING TESTING”会溢出深蓝色区域，该如何解决？

解决方案 #

问题根源在于：

• 导航栏未设置合适的内边距与溢出控制，内容溢出时无法被容器包裹
• navbar-brand的flex布局下，文字容器未开启自动换行且宽度未受限
• 移动端字体尺寸过大，加剧溢出情况

可通过以下步骤修复：

1. 调整导航栏样式，添加内边距与溢出控制

修改<nav>标签样式，补充内边距确保内容有足够空间，同时设置溢出隐藏：

<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; padding: 0.5rem 1rem; overflow: hidden;">

2. 修改文字容器，允许自动换行并限制宽度

给包裹文字的<span>添加white-space: normal; flex: 1;，让长文本自动换行并占据剩余宽度：

<span style="font-size:25px;color:white; white-space: normal; flex: 1;"><span style="color:#e9c46a">City of Testing</span><br />THIS IS TESTING TESTING TESTING</span>

3. 移动端适配字体大小（推荐）

在<head>中添加媒体查询，缩小移动端字体，避免因字号过大导致溢出：

<style>
@media (max-width: 768px) {
    .navbar-brand span {
        font-size: 18px !important;
    }
}
</style>

修复后的核心代码片段

<nav class="navbar" style="background-color: #264653; position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; padding: 0.5rem 1rem; overflow: hidden;">
    <div class="container-fluid">
        <span class="navbar-brand" style="display:flex; align-items:center;">
            <a href="https://www.test.com/">
                <img src="~/Img/test.png" alt="ACR" width="80" height="80" class="d-inline-block align-middle mr-2" runat="server" />
            </a>
            <span style="font-size:25px;color:white; white-space: normal; flex: 1;"><span style="color:#e9c46a">City of Testing</span><br />THIS IS TESTING TESTING TESTING</span>
        </span>
        <a href="https://www.test.com/">
            <img src="~/img/home-icon-white.png" alt="Home" width="30" height="30" class="d-inline-block align-middle mr-2" runat="server" />
        </a>
    </div>
</nav>

修改后，移动端长文本会自动换行，且完全被导航栏的深蓝色背景包裹，不会溢出到下方区域。

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