How to wrap text that is displayed in a <div> with bootstrap form-control and dropdown classes?

Question

I have a razor page where I am displaying the list of selected items from a dropdown menu in a div tag. How can I get @FormattedText auto wrap if the list of items selected exceeds the size of the div.

I tried to apply word-wrap and white-space styles and neither of them worked. The content extends beyond the and the scroll bars are displayed. How can I wrap the content within the ? Thanks for any suggestions!

<style>
    .dropdown {
       word-wrap: normal;
       white-space: normal;
    }
</style>


<div class="form-control col-md-4 dropdown dropdown-toggle">
        @FormattedText

        <div class="dropdown-menu">
            @foreach (var item in Items)
            {
                <div>
                    <input type="checkbox" @bind="item.IsUpdated" />
                    <label for="@item.Name">@item.Name</label>
                </div>
            }
        </div>
</div>

List<string> selectedItems = new List<string>();

public string FormattedText
{
    get
    {
        selectedItems.Clear();

        selectedItems.AddRange(Items.Where(s => s.IsUpdated).Select( item => { return item.Name; }));
        
        if (selectedItems.Any())
        {
            return string.Join(",", selectedItems.ToArray());
        }
     }

    set
    {
        selectedText = value;
    }
}

Answer 1

First of all, your Bootstrap .dropdown structure is not correct. If you look at their examples, .dropdown-toggler and .dropdown-menu need to be the same level, wrapped by .dropdown. Also each item in .dropdown-menu needs to have .dropdown-item class as well.

So you need to change the structure to:

<div class="form-control col-md-4">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler"
          data-toggle="dropdown">
            @FormattedText
        </button>
        <div class="dropdown-menu">
            @foreach (var item in Items)
            {
                <div class="dropdown-item">
                    <input type="checkbox" @bind="item.IsUpdated" />
                    <label for="@item.Name">@item.Name</label>
                </div>
            }
        </div>
</div>

It will look something like this:

The reason why the formatted text, wrapped in the button, is not wrapping is because .dropdown-toggler has style white-space: nowrap;. You can get rid of that style or use Bootstrap utility class .text-wrap on the .dropdown-toggler

<div class="form-control col-md-4">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
          data-toggle="dropdown">
            @FormattedText
        </button>

    ...

</div>

Lastly the dropdown is out of the .form-control's border. That's because .form-control has a fixed height. You can set its height style to auto, or use Bootstrap utility class .h-auto:

<div class="form-control col-md-4 h-auto">
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggler text-wrap"
          data-toggle="dropdown">
            @FormattedText
        </button>

    ...

</div>

Now the whole thing looks like this:

demo: https://jsfiddle.net/davidliang2008/3bykc4rf/14/