Css comment envelopper le texte dans li

Question

J'essaye d'enrouler mon texte dans mon menu de diapositive. J'ai max ul-width 200px, mais quand j'écris un texte plus long, alors mon texte n'est pas visible (maintenant j'ai ajouté overflow: visible pour vous montrer ce que je veux dire). Comment envelopper ceci?

Mon code ressemble à ceci:

<nav class="navbar navbar-default" role="navigation"> 

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
     Dropdown 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" style="max-width: 200px" role="menu" aria-labelledby="dropdownMenu1"> 
     <li role="presentation" class="dropdown-header">Dropdown header</li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation" class="dropdown-header">Dropdown header</li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

</nav> 

Et maintenant css:

<style> 

    .dropdown .dropdown-menu { 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     -ms-transition: all 0.3s; 
     -o-transition: all 0.3s; 
     transition: all 0.3s; 

     max-height: 0; 
     display: block; 
     overflow: hidden; <-- here i was trying to add word-wrap: break-word; but it doesn'twork 
     opacity: 0; 
    } 

    .dropdown.open .dropdown-menu { 
     max-height: 200px; 
     opacity: 1; 
    } 
</style> 

Answer 1

Vous pouvez utiliser word-wrap: break-word; sur li. vérifier extrait mis à jour ci-dessous ..

.dropdown-menu li, .dropdown-menu li a { 
 
    white-space: normal; 
 
    float: left; 
 
    width: 100%; 
 
    height: auto; 
 
    word-wrap: break-word; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default" role="navigation"> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
 
     Dropdown 
 
     <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" style="max-width: 200px" role="menu" aria-labelledby="dropdownMenu1"> 
 
     <li role="presentation" class="dropdown-header">Dropdown header trying to write something</li> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
 
     <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
 
     <li role="presentation" class="divider"></li> 
 
     <li role="presentation" class="dropdown-header">Dropdown header</li> 
 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
 
    </ul> 
 
</div> 
 

 
</nav>

Answer 2

Essayez ceci:

.dropdown-header { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    white-space: normal !important; 
} 

Answer 3

S'il vous plaît essayer avec ce code

.dropdown-menu li, .dropdown-menu li a { 
    word-break: break-word; 
    white-space: normal; 
}