语义 UI 下拉宽度

Question

我使用 Semantic UI 的下拉菜单，其中主要（顶部？..我不知道它是怎么叫的）对象具有固定宽度，selectable 项目可以有任何宽度。如果所有项目的值都很短是可以的，但是当其中一些太长并且它们被 selected - 顶部对象接收 selected 值并且文本被换成几行。

看起来很糟糕，因为下拉菜单的高度变大了 2 倍或 3 倍等。

语义 UI 是否有内置选项来仅显示值的可接受子字符串？例如，如果我们有一个内部项目的价值，我们 select 它：

A veeery looong name in a veeery shooort dropdown

在顶部对象中我得到 3 行：

A veeery looong name in a veeery shooort dropdown

..但我想要这样的东西：

A veeery looong ..

.. 所以它可以显示在 1 行中。如果没有内置选项 - 我如何在不使用等宽字体系列和计算字符的情况下实现这一点？

Answer 1

试试这个：

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

Answer 2

对于以下变体有效：

style={{minWidth:"10em"}}

在

<Form.Field width={3}><Select placeholder='Options' options={options} 
    style={{minWidth:"10em"}}/></Form.Field>

Semantic UI Dropdown Width