Как отобразить текст в несколько строк в

Question

<html>
<head>
<!-------- head -------->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <!-------- end head -------->

</head>

<body>

<select class="selectpicker" data-live-search="true">
                        <option data-tokens="ketchup mustard">Burger, Shake and a SmileBurger, Shake and a SmileBurger, Shake and a Smile</option>
                        <option data-tokens="mustard">Burger, Shake and a Smile</option>
                        <option data-tokens="frosting">Sugar, Spice and all things nice</option>
                    </select>

 <!-------- in the end of the body -------->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <!-------- end of the body -------->
</body>
</html>

У меня есть длинный текст и мне как-то надо его отобразить в несколько строк. Мне нужно, чтобы этот текст разбился на пару строк, ибо он уходит вдаль вправо. В документации bootstrap-select об этом ни слова не сказано.

Answer 1

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Burger, Shake and a SmileBurger, Shake and a SmileBurger, Shake and a Smile, i have many problems with my cake. Lorem test, 123. Test.</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

Answer 2

setTimeout(() => { var item = $(".selectpicker").closest(".bootstrap-select").find("ul li").eq(0).find("span.text").html(
`Burger, <br/>
Shake and a SmileBurger, <br/>
Shake and a SmileBurger, <br/>
Shake and a Smile, <br/>
i have many problems with my cake. <br/>
Lorem test, 123. Test.`
);}, 0);

<head>
<!-------- head -------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<!-------- end head -------->
</head>
<body>
 <select class="selectpicker" data-live-search="true">
                    <option data-tokens="ketchup mustard">Burger, Shake and a SmileBurger, Shake and a<br/> SmileBurger, Shake and a Smile, i have many problems with my cake. Lorem test, 123. Test.</option>
                    <option data-tokens="mustard">Burger, Shake and a Smile</option>
                    <option data-tokens="frosting">Sugar, Spice and all things nice</option>
                </select>
<!-------- in the end of the body -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-------- end of the body -------->
</body>

БЛОГ НА HUSL

Как отобразить текст в несколько строк в

Ответы (2 шт):

БЛОГ НА HUSL

Как отобразить текст в несколько строк в ?

Ответы (2 шт):

Как отобразить текст в несколько строк в