Выпадающее меню Bootstrap: как сделать перенос текста красиво

Я изучаю Bootstrap. Я хотел бы иметь кнопку с раскрывающимся списком, например:

<div class="btn-group">
  <a class="btn dropdown-toggle btn-mini" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <div class="dropdown-menu" style="width: 300px;">
    <div >

  Long text goes here.

    </div>
  </div>
</div>

Вместо выпадающего меню у меня есть <div> с длинным текстом и другими тегами html. Проблема в том, что я пробовал разные правила CSS, а длинный текст либо выходит за пределы <div> либо вызывает появление полос прокрутки. Я просто хочу, чтобы длинный текст обернулся в <div> и опустился в зависимости от количества текста.

Как я могу это сделать?

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

ОТВЕТЫ

Ответ 2

Добавление нормального пробела к тегу привязки внутри.dropdown-меню работало для меня, добавив его только в.dropdown-menu, не получилось.

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

Ответ 3

Это близко к тому, что вы после?
http://www.bootply.com/69776

Вы увидите, что я немного изменил HTML и добавил класс CSS, чтобы ограничить ширину выпадающего списка. HTML берется непосредственно с сайта начальной загрузки с несколькими дополнительными классами для кнопки.

HTML

<div class="dropdown">
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non nulla eu dui incdiet eleifend in vel ligula. Ut time gravida leo. Сед в тикуте. Nam vel nisl nulla. Proin sagittis semper nunc et vehicleula. Proin quam lacus, feugiat quis diam in, malesuada posuere odio. Integer pharetra sed ante eget posuere. Nullam a dapibus leo, vitae gravida ligula. Преданный consectetur lorem et pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel felis. Эмоциональный экзистенциальный эффект.

CSS

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

Надеюсь это поможет!

Ответ 4

Вы можете добавить этот класс в выпадающие элементы. Это обернет текст при необходимости.

.dropdown-item {
  white-space: pre-wrap;
}

Ответ 5

Не совсем отвечаю на вопросы OP, но оно того стоит, так как это хорошо оцененный пост в Google, чтобы обернуть текст для выпадающих списков. Любой, кто ищет быстрое решение, которое просто заставляет вещи выглядеть красиво и выпадающий список не появляется не по порядку, может просто добавить width (как упомянуто в этом ответе SO):

<select id="something" class="bootstrap-select" style="width: 200px;">

Это исправляет ширину <select> (или любого элемента, используемого для выпадающего списка)

(Обратите внимание, что элементы в раскрывающемся списке по-прежнему не будут перенесены, но все выглядит более упорядоченно, поскольку раскрывающийся список не выходит из строя. Кроме того, возможно, необходимо соответствующим образом отрегулировать ширину для мобильных экранов)