Question

是否可以将下拉菜单预览与实际的下拉菜单文本分开？我有一些这样的代码，我只希望在预览时发生，但是在下拉列表扩展时显示全文：

<option value="">{"Lorem ipsum dolor sit".substring(0,15)+"..."}</option>

如何在下拉列表中获得预览而不是全文，并在后面加上“ ...”限制，并在选择下拉列表后充分显示文本

对此感到困惑，我深表歉意。很难解释我需要什么。这是一个JS小提琴，提供了我的代码，以减轻混乱。

http://jsfiddle.net/251s9tuf/1/

select {
  width: 100px
}

<select id='cboSelect'>
  <option value="the_value" label="the text... displayed">the hidden text longer much longer text I want to be shown once dropdown is selected</option>
  <option value="the_value" label="the text displayed2">the hidden text longer much longer text2</option>
</select>

Answer 1

我认为CSS将在Firefox中为您解决这个问题（但是Chrome和Safari不尊重<option>上的样式）。

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

<select id='cboSelect'>
  <option value="the_value" label="the text... displayed">the hidden text longer much longer text I want to be shown once dropdown is selected</option>
  <option value="the_value" label="the text displayed2">the hidden text longer much longer text2</option>
</select>

不允许下拉菜单显示全文

1 个答案: