为什么这段文字会溢出，如何不让它溢出？

编程问答 2022-05-28

问题描述

我正在尝试使用引导程序创建导航菜单栏，但菜单中的文本溢出，有人可以帮忙吗？

这是文字溢出的截图：

Screenshot of the text overflowing

如果文本太长而不是溢出，我想要做的是让文本换行。

代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
  <Meta charset="UTF-8">
  <title>Overflowing text</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="dropdown-item" href="#">This text overflows,how to make it not overflow?</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkBox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

解决方法

您可以为要换行的文本添加 text-wrap 类。

after adding text-wrap

,

类 .dropdown-item 具有导致问题的默认 white-space: nowrap 属性。

您可以通过向类添加 white-space: normal!important 来覆盖该属性。

.dropdown-item {
  white-space: normal!important;
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Overflowing text</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="dropdown-item" href="#">This text overflows,how to make it not overflow?</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

,

我注意到你没有单独的 CSS 代码，所以我在这里添加了内嵌 CSS 代码。我知道内联 CSS 不是最佳做法，因此请随时在单独的样式表中添加修改。

这是我添加到您的代码中的内容：

 style="white-space: normal; margin: auto;"

完整代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Overflowing text</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="dropdown-item" href="#" style="white-space: normal; margin: auto; margin-left:-20%;">This text overflows,how to make it not overflow?</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>

</html>
,

像这里一样添加一些 CSS

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Overflowing text</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
 <style>
    .col{
        min-width: fit-content;
    }
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Button</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">
            <div class="row">
                <div class="col">
                    <h6>Category 1:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a class="dropdown-item" href="#">This text overflows,how to make it not overflow?</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 2:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
                <div class="col">
                    <h6>Category 3:</h6>
                    <ul class="list-group">
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option1</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option2</a></li>
                        <li class="list-group-item"><a href="#"><input type="checkbox"> Option3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap-modalhtml