Javascript 如何避免JQuery中文本与div元素交叉？

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

问题是当我写一些文本时，文本会穿过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);


    }

});

$（函数（）{
//单击“功能”添加卡
var$div=$（''）.addClass（'sortable-div'）；
var cnt=0，
$currentTarget；
$（'#AddCardBtn'）。单击（函数（）{
var$newDiv=$div.clone（true）；
cnt++；
$newDiv.prop（“id”、“div”+cnt）；
$newDiv.data（'复选框'，[]）；
$（'#userAddedCard'）。追加（$newDiv）；
//警报（$（'userAddedCard'）.find（“div.sortable-div”）.length）；
});
//双击打开模态对话框窗口
$（'#userAddedCard'）.dblclick（函数（e）{
$currentTarget=$（e.target）；
$（'modalDialog'）。对话框({
莫代尔：是的，
身高：600，
宽度：500，
位置：'中心'
});
返回false；
});
$（“#Getbtn”）。在（“单击”，函数（）{
$（'modalDialog'）。对话框（“关闭”）；
});
//添加一个新的复选框
$（'#btnSaveCheckBox'）。单击（函数（）{
addCheckbox（$（'#checkBoxName'）.val（）；
$（'#checkBoxName'）.val（“”）；
});
函数addCheckbox（名称、状态）{
状态=状态| |假；
变量容器=$（“#boxs”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
风险值数据={
状态：状态，
姓名：姓名
};
var div=$（''，{class:'allcheckbox'}）；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).prop（'checked'，status.）.on（'change'，function（）{
data.status=$（this.prop（'checked'）；
}).appendTo（div）；/*设置复选框状态并监视更改*/
$('', {
‘for’：‘cb’+id，
文本：名称
}).附件（分部）；
附件组（容器）；
}
});

将此添加到CSS中：

.allcheckbox label
{
     word-wrap: break-word;
}

---

这将迫使溢出的字符串中断。下面是演示：

您可以使用CSS3

溢出包装：break word

属性、

word break:break all

，或者使用容器元素的

溢出-x:hidden

---

更多信息，以及。

您可以将css用于此div

word-wrap:break-word;
overflow:hidden;

检查以下答案：

基本上你是这样做的：

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; 
}

相关的：