Hide overflow of dropdown options-CodePudding

I have a dropdown list of names but if a name is too long, the list distorts the page. To combat this, i wish to hide the overflow of each option or add an ellipsis if the name is too long. Ive tried text-overflow: hidden; but I cannot get it to work, any help appreciated!

                            <div >
                            <select  id="addWatcherSelect" data-e2e="groups-details-assign-watcher" style="text-overflow:ellipsis;" asp-items="@Model.UnassignedWatchers">
                                <option value="0" selected="selected">Assign New Watcher</option>
                            </select>
                            <div >
                                <button type="submit"  id="addWatcherBtn" data-e2e="groups-details-add-watcher">
                                    <span >Add</span>
                                </button>
                            </div>

               $("button[id$='addWatcherBtn']").on('click', function (e) {
                let leagueId = $('#addWatcherSelect option:selected').val();
                if (leagueId) {
                    $.ajax({
                        url: '@Url.Action("AddWatcher", "GroupsApi", new { id = Model.GroupId })',
                        type: 'POST',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify(leagueId),
                        success: function (result) {
                        }
                    });
                }
            })

CodePudding user response：

To manage the height of a div, and to show a vertical scroll bar only when needed, add this to your input-group css class(change the px value as needed).

  max-height: 100px;
  overflow-y: auto;

For the option, you may want to assign a (new) css class, and these properties (changing the px value as needed):

  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

CodePudding user response：

I'm afraid you can't apply styling to options in select elements.You can refer to the link.

Maybe you can try to shorten the length of innerHTML of options with js:

$(function () {
            $("option").each(function (index, item) {
                if (item.innerHTML.length > 80) {
                    item.innerHTML = item.innerHTML.substring(0, 80) "...";
                }
            })
        })