按钮文本溢出未换行问题求助（基于Bootstrap与jQuery）

嘿，我明白你遇到的问题了——带小标题和描述的按钮，文本太长就溢出，没法自动换行对吧？这其实是Bootstrap按钮默认的样式在搞鬼，咱们调整一下CSS就能轻松搞定！

核心思路 #

Bootstrap的.btn类默认设置了white-space: nowrap，强制文本不换行，所以咱们需要覆盖这个属性，同时加上换行相关的样式，让文本能自动折行。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
    <style>
        body { 
            background-color: #c0c0c0; 
        }
        /* 自定义按钮样式，解决换行问题 */
        .btn-wrap-text {
            white-space: normal !important; /* 覆盖默认的nowrap */
            word-wrap: break-word; /* 长单词自动拆分换行 */
            max-width: 220px; /* 可选：限制按钮最大宽度，按需调整 */
            padding: 1rem; /* 增加内边距，让文本显示更舒服 */
        }
        .btn-title {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        .btn-description {
            font-size: 0.9rem;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container-fluid" style="text-align: center; margin-top: 2rem;">
        <div id="final">
            <!-- 可跳转的按钮 -->
            <a href="#your-target-link" class="btn btn-primary btn-wrap-text">
                <div class="btn-title">这是按钮小标题</div>
                <div class="btn-description">这里是很长很长的描述文本，测试一下当内容超出按钮宽度的时候会不会自动换行，不用再担心文本溢出按钮啦！</div>
            </a>
        </div>
    </div>
</body>
</html>

关键样式说明 #

• white-space: normal：核心属性，直接覆盖Bootstrap按钮默认的nowrap设置，允许文本在需要时自动换行。
• word-wrap: break-word：专门处理超长单词的情况，自动拆分单词避免单个单词直接溢出按钮。
• max-width（可选）：限制按钮的最大宽度，避免按钮因为文本过长变得太宽，数值可以根据你的需求调整。
• 自定义的.btn-title和.btn-description：用来区分小标题和描述的样式，让按钮内容层级更清晰，提升可读性。

如果你的按钮不需要固定宽度，直接去掉max-width属性就行，按钮会根据内容自适应宽度，但文本依然会自动换行哦！

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