Is there a way to automatically wrap @FormattedText if the selected items from a dropdown menu exceed the size of the div on my razor page?
I've already tried using word-wrap and white-space styles, but they didn't work as expected. The content keeps extending beyond the div and scroll bars are displayed. How can I make sure the content wraps within the div? Any suggestions would be greatly appreciated!
<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;
}
}