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中包裝文本

回答

相關問題