htmlcsssemantic-ui

Semantic UI Dropdown Width


I use Semantic UI's dropdown, where main (top? ..I don't know how it's called) object has fixed width, selectable items may have any width. It is OK if all items values are short, but when some of them are too long and they get selected - top object receives selected value and the text is wrapped into several lines.

It looks bad because dropdown's height becomes 2x or 3x etc. bigger.

Does Semantics UI have a built-in option to show only acceptable substring of a value? For example if we have a inner item's value and we select it:

A veeery looong name in a veeery shooort dropdown

In the top-object I get 3 lines:

A veeery looong name in a veeery shooort dropdown

.. but I want something like:

A veeery looong ..

.. so it can be shown in 1 line. If there is no built-in option - how can I achieve this without using monospace font-family and counting chars?


Solution

  • Try this:

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