[Angular ng-multiselect-dropdown]: Avoid coming of selected values with space in next line

Question

Scenario:

1. I am using ng-multiselect-dropdown in Angular and i have below code.

in .ts file
this.employee_list = [
      { Id: 1, Value: 'Europe' },
      { Id: 2, Value: 'Employee Name' },
      { Id: 3, Value: 'Employee Address' },
      { Id: 4, Value: 'Employee LastName' }
    ];

this.dropdownSettings = {
      idField: 'Id',
      textField: 'Value',
      itemsShowLimit: 3
    };


in html code:

<div class="col-md-4">
                    <label for="employee">Choose a Employee details</label>
                    <ng-multiselect-dropdown
                        [settings]="dropdownSettings"
                        [data]="employee_list">
                    </ng-multiselect-dropdown>
</div>

2. When i am trying to select any values with large length with spaces , the selected values are displayed in multiple lines even with space available. Instead need it in single line with overflown values as .... and if possible on hovering the values should be displayed

Answer 1

in style.css

.custom-font-size .multiselect-dropdown .dropdown-btn .selected-item-container .selected-item  {
    max-width: 700px !important;
}

in html

<ng-multiselect-dropdown class="custom-font-size"
                        [settings]="dropdownSettings"
                        [data]="employee_list">
                    </ng-multiselect-dropdown>

Above code worked for me. you can set max width according to your requirement.

Reference:set width of ng-multiselect-dropdown

Answer 2

Its a style issue. try to play around CSS

   <ng-multiselect-dropdown
        style = "white-space: normal;"
        [settings] = "dropdownSettings"
        [data] = "employee_list" >
    </ng-multiselect-dropdown >