Question

我希望我的下拉文本的长度在某个宽度之后到达下一行。

我尝试了white-space:normal;，但这无效。

<div class="dropdown">
  <a class="dropdown-toggle" id="dropdownMenu1" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <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"><a role="menuitem" tabindex="-1" href="#">Something else heresssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Here是小提琴。

更新：已修复。缺少word-wrap: break-word;

感谢大家的快速回复。

Answer 1

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

.dropdown-menu{
    max-width: 200px;
}

Fiddle Demo

Answer 2

使用以下CSS：

.dropdown-menu > li > a {
    word-wrap: break-word;
    width: 200px; /* change accordingly */
    white-space: normal;
}

Updated fiddle

Answer 3

这很简单，只要注意最长的单词，否则它们会溢出容器

.dropdown-menu{
    max-width: 200px;
}

.dropdown-menu > li > a{
    white-space: normal;
}

Answer 4

做到：

.dropdown-menu>li>a {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
.dropdown-menu{
  //give some width
}

Answer 5

只需使用以下

更新您的CSS

<强> CSS

.dropdown-menu {
    width: 200px;
}
.dropdown-menu > li > a {
    word-break: break-all;
    white-space:normal;
}

Fiddle Demo

Answer 6

使用以下css：

.dropdown ul{width: 250px; word-wrap: break-word;} 

.dropdown li a {white-space: normal !important;}

fiddle

Answer 7

white-space-normal或word-break: break-word;不适用于您的原因是因为默认情况下bootstrap css库正在将以下css属性应用于锚标记。

dropdown-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap;display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap; // this is the culprit
}

所以最后一行white-space: nowrap;是阻止你破线的原因，因为那是优先考虑的。

我的解决方案：

以特异性white-space覆盖!important css属性。
还将word-break: break-word;属性添加到锚标记，以便更好地格式化文本。

现场演示@ JSFiddle：http://jsfiddle.net/n7r4mjf2/8/

将下拉文本长度分解为下一行

7 个答案: