html - Firefox 不考虑内部内联元素的外部 block 最大宽度

Question

fiddle :http://jsfiddle.net/6dqjoLrn/2/

我正在制作一个自定义输入框，其中将包含各种 ContentEditable SPAN 和一些非 ContentEditable DIV。我试图将所有 ContentEditable SPAN 包含在我的“输入框”范围内。所有这些元素都在一个设置了最大宽度的 DIV 中，我希望它能够包含所有元素。 Chrome 和 IE 就是这种情况，但在 Firefox 中似乎不起作用(可以通过运行 Fiddle 看到)。尝试包含这些内容时我做错了什么，还是我需要在 Firefox 中使用一些特殊技巧来实现这一点？

谢谢。

HTML:

<div id="Outside">
    <div class="tokenizer">
        <div class="content">
            <span contenteditable="true" class="textInput lastInput empty"></span>
        </div>
        <div id="dropdownbtn" class="listHidden">&#x25BC;</div>
    </div>
</div>

CSS:

* {
    font-family: 'Trebuchet MS';
    font-size: 16px;
}

span {
    border: 0px;
}

span.textInput {
    line-height:29px;
    word-break: break-all;
}

span:focus {
    outline: none;
}

span.empty {
    width: 1px;
    display: inline-block;
}

.tokenizer {
    width: 500px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    margin: auto;
    margin-top: 100px;
    overflow: hidden;
    cursor: text;
}

.content {
    display: inline-block;
    float: left;
    max-width: 474px;
}

#dropdownbtn {
    display: inline-block;
    float: right;
    border: 1px solid #39668D;
    width: 20px;
    text-align: center;
    background-color: #E0E9F1;
    border-radius: 2px;
    color: #39668D;
    cursor: pointer;
}

#Outside {
    top:40px;
    left:50px;
    width:100%;
}

JS:

$('span.textInput').on('keydown', function(event) {

    var element = $(event.target);
    if (element.text().length > 0) {
        if (element.hasClass('empty')) {
            element.removeClass('empty');
        }
    } else {
        if (!element.hasClass('empty')) {
            element.addClass('empty');
        }
    }
});

$('.tokenizer').on('click', function(event) {
    if ($('.curInput').length) {
        $('.curInput').focus();
    } else {
        $('.lastInput').focus();
    }
});

Answer 1

尝试将其添加到您的 CSS。

.content {
  word-break: break-all;
}

word-break: break-word; 应该也可以。

这解决了我的问题。 http://jsfiddle.net/5de1zq8n/

Chrome 和 Firefox 似乎都使用默认样式 word-break: normal; 但 Chrome 似乎遵守 max-width，而 Firefox 则不。

希望对您有所帮助。