选择元素：没有javascript的短名称和长名称？

是否有一种非javascript方法允许元素在折叠时显示短文本，在展开时显示长文本？我遇到了的“label”属性，但它仅在IE7+中受支持

例如：

展开的菜单将显示：

• 哲学101
• 宗教研究202
• 冥想导论303
• 心智及其潜能404

…而折叠的菜单将显示（对应项）：

• 菲尔101
• RELI 202
• MEDI 303
• 注意404

我使用它的目的是：

---

我试图用几个选择菜单来清理表单的布局。使用CSS width属性可以为菜单实现统一的宽度，但是当菜单折叠时，具有较长显示文本的项目将被切断。显示较短的文本可以解决这个问题。

不，我知道没有任何方法可以在不使用JS的情况下完成类似的操作。 类似的东西可能是一个可能的起点，但只适用于Firefox：

<style>
    .sel:focus .l{display:; visibility: visible;}
    .sel:focus .s{display: none; visibility: hidden;}
</style>
<select class="sel">
    <option class='s'>ntry1</option>
    <option class='l'>entry aaaaaaa</option>
    <option class='s'>entry2</option>
    <option class='l'>entry bbbbbbb</option>
</select>

.sel:focus.l{显示：；可见性：可见；}
.sel:focus.s{显示：无；可见性：隐藏；}
ntry1
条目AAAAAAAA
入口2
条目bbbbbbb