jquery - jQuery 附加元素 - 文本不适合

Question

所以我不知道为什么这不起作用。我有以下 jQuery：

$('#shifts').on({
    click: function(event)
    {
        selectStaff($(this));
    },
    mouseover: function()
    {
        var match = $(this);
        // There is something wrong with this user. Lets write it all down
        if( match.hasClass('warning') )
        {
            var w1 = '<div class="display_warning">This user has already been used for today.</div>';
            var w2 = '<div class="display_warning">This user is not qualified to perform one or more of the tasks assigned to this shift</div>';
            var warning = '<div id="display_warning">' + w1 + w2 + '</div>';

            match.after(warning);

        }
    },
    mouseout: function()
    {
        $('#display_warning').remove();
    }
},'.staff .match');

我的 css （下面的代码在 LESS 中）为.display_warningand#display_warning是

#display_warning
{
    float: left;
    width: @shiftWidth;
    background-color: @white;
    padding-top: @unit;
    padding-bottom: @unit;
    color: @textColor;
    font-size: 12px;
    height: 100px;
    //border: 1px sol;
    .display_warning
    {
        float: left;
        width: @shiftWidth;
        //text-align: center;

    }
} 

但是，文本超出了 div 并且不受 div 内的约束！为什么？！

Answer 1

问题是因为您已经为块元素指定了width和。height如果您删除其中任何一个，那么您的文本将包含在 中div，或者另一个选项是将它们更改为，min-width如果您可以div水平扩展，或者min-height如果您可以div垂直扩展。