强制JQuery对话标题为多行

时间:2014-07-28 15:00:34

标签: javascript jquery css jquery-ui jquery-ui-dialog

如何强制jQuery对话框的标题始终为两行?

请参阅:http://jsfiddle.net/VKcJ7/24/

我知道对话框标题包含在一个范围内,因此我不确定这是否可行。我想要一些'一些项目'部分总是在第一行,而剩下的数量......'部分总是在第二行。

JS:

$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        title: 'SOME ITEM \n Remaining Qty (Cts.): 0'
        //adding the newline character \n is ignored...
    });
});

CSS:

.ui-dialog .ui-dialog-title {
    white-space:normal;
}

2 个答案:

答案 0 :(得分:2)

我最终使用了这个问题的答案(感谢@jazZRo): Using HTML in a Dialog's title in jQuery UI 1.10 扩展小部件。

然后我将标题设置如下:(工作示例:http://jsfiddle.net/VKcJ7/30/

JS:

$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        title: 'SOME ITEM <br> Remaining Qty (Cts.): 0'
        //adding the newline character \n is ignored...
    });
});

答案 1 :(得分:0)

官方说,我认为你不能。

黑客的方法是把它塞进:

$("#dialog")
    .dialog({
      autoOpen: false
    })
    .closest(".ui-dialog")
      .find(".ui-dialog-title")
        .html("Dialog<br>Title");

Live Example | With resizable: true

jQuery UI Dialog with Multi-line title

但又一次,相当hacky。