语义 UI 下拉宽度

Question

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

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

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

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;
  overflow: hidden;
  white-space: nowrap;
}

Answer 2

对于以下变体有效：

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

在

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