Question

小提琴：http://jsfiddle.net/6dqjoLrn/2/

我正在创建一个自定义输入框，其中包含各种ContentEditable SPAN和一些非ContentEditable DIV。我试图在我的“输入框”的范围内包含所有ContentEditable SPAN。所有这些元素都在DIV中，并设置了max-width，我希望它能够包含所有元素。这是Chrome和IE的情况，但似乎不适用于Firefox（可以通过运行小提琴看到）。在尝试包含这些内容时，我有什么问题，或者在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则不服从。{/ p>

希望有所帮助。

Firefox不尊重内部内联元素的外部块最大宽度

1 个答案: