jquery - 如何解决 jquery UI 选项卡的选项卡标题过长时的显示问题

Question

我有一个 jQuery UI 选项卡，元素的选项卡标题不断变化。

问题是什么

当标签标题很长时，标签将无法正常显示，标签标题也是如此，

示例可以在这里找到Jsfiddle link , 它有一个输入来接受要更新的标签标题，当我们给一些长文本作为 "TESTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT".标签将无法正确显示。

如何通过在文本的任何宽度下正确显示选项卡来解决此问题。

Answer 1

您可以添加以下 CSS 以使标签具有特定的 (max-)width 并在标题太长时使用 ... 切断标题。

.ui-tabs-anchor {
   white-space: nowrap;
   max-width: 9em;
   overflow: hidden;
   text-overflow: ellipsis;
}

JSfiddle