当 jquery UI 选项卡的选项卡标题很长时如何解决显示问题答案

【问题标题】：How to fix the display issue when the tab heading is long for the jquery UI tabs当 jquery UI 选项卡的选项卡标题很长时如何解决显示问题
【发布时间】：2014-12-16 11:43:16
【问题描述】：

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

问题是什么

标签页标题过长时，标签页无法正常显示，标签页标题也会显示，

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

如何通过正确显示标签来解决此问题，而不管文本的宽度如何。

【问题讨论】：

“标签将无法正确显示”究竟是什么意思。..？结果看起来很好，符合我的预期。

标签： jquery css jquery-ui jquery-ui-tabs

【解决方案1】：

您可以添加以下 CSS 以使标签成为特定的 (max-)width，如果标题过长，则使用 ... 截断标题。

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

JSfiddle

【讨论】：