Adjust large text contents to dropdown

Question

Adjust large text contents to dropdown

Navigation

#1 by (3 votes)

2

I have a menu made with Bootstrap 3, this has sub menus and the titles of these sub menus are very large making the final result look like this.

What I need is that those texts that I actually show are fields of a database and what I need is that it is visualized in the following way, I have managed to see them that way by putting < br > in the text, but as he said that text that he really wants to recover will take them from fields of a database and does not want the end user to have to see the labels
.

Some advice or a solution, to solve this. Here I leave the code that I am using.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">
      To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a 	link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and 		data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown 	menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of 	.dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To 		open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link 	with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-		toggle="dropdown"
      </a></li>
    </ul>
  </div>
</div>

</body>
</html>

html5 bootstrap

asked by Julio Flores 24.06.2018 в 06:46

source

1 answer

No MysqlInd does not work fetch_assoc or get_result () Activate HTML5 validations from Js

score 3 · Accepted Answer

Styles for this element are defined as follows

.dropdown-menu>li>a{
  ....
  white-space : nowrap // propiedad que ocasiona este detalle
}

To give a quick solution, you could create a new class to handle this property white-space in the following way and add to the element directly

.text-wrap{
  white-space: normal !important;
}

Ejm

.text-wrap{
  white-space: normal !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown class is used to indicate a dropdown menu.</p>
  <p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
  <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>                                          
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#" class="text-wrap">
      To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a 	link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and 		data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown 	menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of 	.dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To 		open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link 	with a class of .dropdown-toggle and data-toggle="dropdown"To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-		toggle="dropdown"
      </a></li>
    </ul>
  </div>
</div>