Line break through CSS

Question

I want to insert a line break using CSS, there are two classes : select2-search-field and select2-search-choice they are coming in same div as li element Could please suggest any way I could break them to populate in two lines.

I have tried : How to insert a line break before an element using CSS

Following is the code snippet for which I want to achieve line break in

between class “select2-search-choice” and "select2-search-field"

<div class="counterPartyId">
    <ul class="select2-choices">
        <li class="select2-search-choice">
            <div>ABN nv,</div>
        </li>
        <li class="select2-search-field" >
            <label for="s2id_autogen5" class="select2-offscreen"></label>
            <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">
        </li>
    </ul>
</div>

`li.select2-search-choice, li.select2-search-field { display: block; }` — Huelfe, Mar 06 '18 at 08:10
Have a look on this answer. You only need the "after" selector: [How to insert a line break before an element using CSS](https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css#11750985) — Sir HC, Mar 06 '18 at 08:15

score 1 · Answer 1 · answered Mar 06 '18 at 08:13

use css code " display: block "

li {
  display: block;
 }

<div class="counterPartyId">
  <ul class="select2-choices">  
    <li class="select2-search-choice">    
        <div>ABN nv,</div>    
    </li>
    <li class="select2-search-field" >    
      <label for="s2id_autogen5" class="select2-offscreen"></label>       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">  
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered Mar 06 '18 at 08:10

You just need to add 'display: block' to the li's if you want them to occupy each one row

ul li { display: block; }

<div class="counterPartyId">
                                <ul class="select2-choices">  
                                                <li class="select2-search-choice">    
                                                                <div>ABN nv,</div>    
                                                </li>
                                                <li class="select2-search-field" >    
                                                <label for="s2id_autogen5" class="select2-offscreen"></label>    
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" id="s2id_autogen5" placeholder="" style="width: 103px;" aria-activedescendant="select2-result-label-7">  
                                                </li>
                                </ul>
</div>

Line break through CSS

2 Answers2