сломать длину выпадающего текста до следующей строки

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 CSS со спецификой !important.
• Также добавляется свойство word-break: break-word; к якорной метке, чтобы текст был лучше отформатирован.

Демо @ JSFiddle: http://jsfiddle.net/n7r4mjf2/8/