如何在vaadin中为按钮标题的字母加下划线？答案

【问题标题】：how to underline a letter of button caption in vaadin?如何在vaadin中为按钮标题的字母加下划线？
【发布时间】：2016-05-12 13:08:45
【问题描述】：

我在我的 Vaadin 应用程序中使用键盘快捷键。所以我想在按钮标题中突出显示一个字母。下划线可能是标题的第一个或第二个或第三个字母。

我可以使用 CSS 的“first-letter”属性为第一个字母添加下划线。如何在第二个或第三个字母下划线？

NativeButton btn = new NativeButton("Edit");
btn.addStyleName("myunderline");

.mytheme .myunderline.v-nativebutton::first-letter {
     text-decoration: underline;
}

有什么解决办法吗？

谢谢！！！

【问题讨论】：

标签： css vaadin

【解决方案1】：

所以我想突出显示按钮标题中的一个字母...

您尚未指定您正在使用的 vaadin 版本。但最新的 vaadin 7 (> 7.4) 版本支持Button 标题中的 HTML。

NativeButton nb = new NativeButton("<u>E</u>dit");
nb.setCaptionAsHtml(true);

【讨论】：

【解决方案2】：

在创建快捷方式侦听器期间可以使用& 符号来指示它。

根据 Vaadin 文档： https://vaadin.com/docs/-/part/framework/advanced/advanced-shortcuts.html

// A field with Alt+A bound to it, using shorthand notation
TextField address = new TextField("Address (Alt+A)");
address.addShortcutListener(
        new AbstractField.FocusShortcut(address,  "&Address"));

希望对你有帮助。

【讨论】：

【解决方案3】：

看起来没有简单的 CSS 解决方案，基于有人尝试做同样事情的 This Answer，以及来自 Vaadin 论坛的 This Answer。

基本上，您最简单的选择是将要下划线的字母包装在应用下划线的自己的元素中：

<button ...>Te<span class=underline>x</span>t</button>

...或者类似的东西。上面的第一个链接有一个答案，它引用了许多其他 JS 库（lettering.js、nth-everything-css），它们可能会帮助你。

【讨论】：