Question posted in 
I’m trying to create a navigation menu bar using bootstrap, but the text inside the menu overflows, can anybody help?
Here is the screenshot of the text overflow:
Screenshot of the text overflowing
What I’m trying to do is to make the text wrap if it’s too long instead of overflowing.
And heres the code:
<!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>
4
Answers
You can add a text-wrap class to text that you want to wrap.
Just add some CSS like here
The class
.dropdown-itemhas a defaultwhite-space: nowrapproperty to it which is causing the problem.You can override the property by adding
white-space: normal!importantto the class.I noticed that you don’t have separate CSS code, so I added in-line CSS code here. I am aware that inline CSS isn’t the best practice so feel free to add the modifications on a separate style sheet.
This is what I added to your code:
Here is the full code: