如何防止Bootstrap容器内的HTML文本溢出容器边界

连续无空格的长文本（如一串相同字符）默认不会被浏览器自动拆分，因此会溢出Bootstrap容器的边界。你可以通过以下方法解决：

方法一：使用Bootstrap内置类 #

Bootstrap提供了text-wrap类，可直接应用在文本所在元素上，强制文本换行适配容器：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
    crossorigin="anonymous"></script>

<div class="container bg-danger">
    <div class="row">
        <div class="col">
            <a class="text-warning text-wrap">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
        </div>
    </div>
</div>

方法二：自定义CSS样式 #

如果需要更灵活的换行控制，可以使用CSS的word-break或overflow-wrap属性：

方案A：强制任意位置换行 #

给文本元素添加word-break: break-all;样式，会在任意字符处强制拆分换行，适合纯数字、连续符号等场景：

<style>
    .break-all {
        word-break: break-all;
    }
</style>

<!-- 其他代码不变 -->
<a class="text-warning break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>

方案B：优先保留语义换行 #

使用overflow-wrap: break-word;样式，会尽量在单词边界换行，只有当整个单词无法容纳时才拆分字符，适合英文单词等有语义的文本：

<style>
    .break-word {
        overflow-wrap: break-word;
    }
</style>

<!-- 其他代码不变 -->
<a class="text-warning break-word">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>

补充说明 #

• text-wrap本质是设置white-space: normal;，适合普通带空格的文本，搭配word-break可更好处理无空格长字符串。
• 两种CSS方案各有侧重，可根据实际文本类型选择。

内容的提问来源于stack exchange，提问作者Meikel Rizky Hartawan