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

Question

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

文字溢出的截图如下：

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>

Answer 1

您可以将 text-wrap class 添加到要换行的文本中。

Answer 2

像这里一样添加一些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>

Answer 3

class .dropdown-item 有一个默认的 white-space: nowrap 属性导致了问题。

您可以通过将 white-space: normal!important 添加到 class 来覆盖属性。

.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>

Answer 4

我注意到您没有单独的 CSS 代码，因此我在此处添加了内联 CSS 代码。我知道内联 CSS 不是最佳实践，因此请随意在单独的样式 sheet.

上添加修改

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

 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>

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

Why is this text overflowing and how to not make it overflow?

html

css

bootstrap-modal