如何修复下拉菜单内容中的超大字间距问题

我的首个项目里的下拉菜单出现字间距异常过大的问题，比如「Classical History」显示成「Classical_______History」（下划线代表超大间距）。调整下拉菜单的max-width属性只会让「History」换行，没法缩小字间距。

相关代码 #

HTML

<div class="dropMenu">
            
    <button type="button" id="nav" class="menuButton"  onclick="showMenu()">Navigation</button>
        
        <div id="DropDiv" class="MenuContent">
        
        <a href="Biography.html">Biography</a>
        <a href="Classics.html">Classical History</a>
        <a href="DnD.html">Dungeons & Dragons</a>
        <a href="KatmaiBears.html">Katmai Bear Cameras</a>
        <a href="Knitting.html">Knitting</a>
        <a href="Reading.html">Reading</a>
        <a href="VideoGames.html">Video Games</a>
        <a href="Writing.html">Writing</a>
   
    </div>
</div>

CSS

a:link {
    color:rgb(92, 24, 43);
    text-decoration: none;
}

a:visited {
    color: rgb(122, 122, 122);
}

a:hover {
    color: rgb(122, 122, 122);
}

#nav {
    color: rgb(255, 254, 240);
    float: left;
}

.menuButton {
    border: 2px solid rgb(255, 254, 240);
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    float: left;
    margin-top: 10px;
    background-color: rgb(92, 24, 43);
    cursor: pointer;
    z-index: 1;
}

.menuButton:hover, .menuButton:focus {
    background-color: rgb(122, 122, 122);
}


.dropMenu a {
    color:rgb(92, 24, 43);
    padding: 10px;
    text-decoration: none;
    display: block;
}

#DropDiv {
    margin-top: 75px;
    position: absolute;
    background-color: rgb(255, 254, 240);
    z-index: 10;
}

.MenuContent {
    display: none;
}

.dropMenu a:hover {background-color: rgb(122, 122, 122);}

.show {
    display: block;
}

JS（供参考）

function showMenu() {
    document.getElementById("DropDiv").classList.toggle("show");
}


window.onclick = function(event) {
    if (!event.target.matches('.menuButton')) {
        var dropdowns = document.getElementsByClassName("MenuContent");
        var i;
        for (i=0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

解决方法 #

问题根源是下拉容器#DropDiv未设置宽度，导致容器被过度撑开，同时可能继承了父元素的分散对齐样式，让文字间距被拉大。按以下步骤修改CSS：

1. 给#DropDiv设置自适应内容的宽度，避免容器过宽：

#DropDiv {
    margin-top: 75px;
    position: absolute;
    background-color: rgb(255, 254, 240);
    z-index: 10;
    width: fit-content; /* 让容器宽度适配内容 */
    max-width: 200px; /* 可选：限制最大宽度，避免过长内容撑太宽 */
}

2. 给菜单项a标签强制左对齐，重置字间距属性，确保文字正常排列：

.dropMenu a {
    color:rgb(92, 24, 43);
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: left; /* 强制左对齐 */
    word-spacing: normal; /* 重置单词间距 */
    letter-spacing: normal; /* 重置字母间距 */
}

修改后，下拉菜单会根据内容自动调整宽度，文字左对齐且间距恢复正常，不会再出现过度拉伸的情况。

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