如何解决为什么这段文字会溢出，如何不让它溢出？
我正在尝试使用引导程序创建导航菜单栏，但菜单中的文本溢出，有人可以帮忙吗？
这是文字溢出的截图：
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 类。
类 .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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
