css如何在li中包装文本

我试图在我的幻灯片菜单中包装我的文本。我有ul最大宽度200px，但是当我写更长的文本，然后我的文本是不可见的（现在我添加溢出：可见，以显示你我的意思）。如何包装这个？css如何在li中包装文本

我的代码如下所示：

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

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

来源

2017-07-18 wenus

也尝试添加宽度为自动换行 –

您可以在li使用word-wrap: break-word;。检查以下更新片断..

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

来源

2017-07-18 05:13:44

工程thx太多了 – wenus

试试这个：

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

来源

2017-07-18 05:22:07 ABlack

你可能想看看[当你应该使用重要]（https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/#when-should-important-be -用过的）。 –

我使用！重要的情况下，wenus不改变他的代码，但没有别的，但是，谢谢你的信息。 – ABlack

-1

请使用此代码

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

来源

2017-07-18 05:32:47

这不会增加任何已发布的答案。 –

css如何在li中包装文本

回答

相关问题