在Firefox

Question

在Firefox和Chrome中查看这个JS小提琴

https://jsfiddle.net/rdsz2thp/

在'word-break: break-word'上的webkit input['text']中，会在内部进行单词换行。 Firefox不支持这种做法，但有没有办法解决这个问题？

示例代码：

.wrappy {
    word-break: break-word;
    width: 100%;
    height: 58px;
}

.wrapper {
    width: 200px;
}

<div class='wrapper'>
    <input type='text' class='wrappy' value="fsdf asdf asdfsadfasdf sdf sdfasd fsdas dfsadf asdf sadfasfd asdf sdf asdf sdfasdf asdf asd fsadfasfd ">
</div>

Answer 1

<input>是单行，<textarea>是多行。因此，请改用<textarea>

<强> HTML

<div class='wrapper'>
    <textarea class='wrappy'>fsdf asdf asdfsadfasdf sdf sdfasd fsdas dfsadf asdf sadfasfd asdf sdf asdf sdfasdf asdf asd fsadfasfd</textarea>
</div>

<强> DEMO HERE

Answer 2

请改用textarea，参见here。

<div class='wrapper'>
    <textarea class='wrappy'>fsdf asdf asdfsadfasdf sdf sdfasd fsdas dfsadf asdf sadfasfd asdf sdf asdf sdfasdf asdf asd fsadfasfd</textarea>
</div>