语义 UI 下拉菜单宽度答案

【问题标题】：Semantic UI Dropdown Width语义 UI 下拉菜单宽度
【发布时间】：2017-01-30 20:40:12
【问题描述】：

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

看起来很糟糕，因为下拉菜单的高度变大了 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 行中。如果没有内置选项 - 如何在不使用等宽字体系列和计数字符的情况下实现这一点？

【问题讨论】：

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

对于以下变体有效：

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

在

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

【讨论】：