javascript - 文本在对话框中排成一行

Question

我无法处理来自数据库的数据中的空白

代码如下:

<td class="tdx" bgcolor="#CCCCCC" style="" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
    <div class="dialog">
        <p>
            <%=solution%>
        </p>
    </div>
    <button class="opener">Open Dialog</button>
</td>

<%=solution%>来自 DB 是单行的。我还在 CSS 中包含了预包装

jquery 代码:

$(function() {

    $('.opener').each(function() {
        var dialog = $(this).prev('.dialog').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        $(this).click(function() {
            dialog.dialog("open");
        });
    });
});

如果我不使用对话框并检索文本区域中的文本...一切顺利

NODE --> pre wrap 在 fiddle 中运行良好

已添加图片

Answer 1

dialog p{
  word-break: break-all;
}

将以上代码添加到您的 CSS。