javascript - JQuery中如何避免文本越过div元素？

Question

当我将卡片添加到收件箱时。然后可以双击卡片，弹出对话框。在对话框中可以创建动态复选框。

问题是当我写一些文本时，文本穿过了 div 元素。我不想要那个。我怎样才能避免这种情况？

您可以在下图中看到问题:

JQuery:

$(function () {
    // Click function to add a card
    var $div = $('<div />').addClass('sortable-div');

    var cnt = 0,
        $currentTarget;
    $('#AddCardBtn').click(function () {
        var $newDiv = $div.clone(true);
        cnt++;
        $newDiv.prop("id", "div" + cnt);

        $newDiv.data('checkboxes', []);

        $('#userAddedCard').append($newDiv);
        //      alert($('#userAddedCard').find("div.sortable-div").length);        
    });

    // Double click to open Modal Dialog Window
    $('#userAddedCard').dblclick(function (e) {
        $currentTarget = $(e.target);



        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });
        return false;

    });

    $("#Getbtn").on("click", function () {

        $('#modalDialog').dialog("close");
    });

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name, status) {
        status = status || false;

        var container = $('#boxs');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        div.appendTo(container);


    }

});

Live Demo

Answer 1

检查这些答案:

word-wrap does not work in IE

word-wrap:break-word not working in IE8

基本上你会:

div.break_word {
    width: 690px; /* whatever width, if needed */
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-all;
    white-space: normal; 
}

相关:

http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/