如何使用flex包装contenteditable div中的长行

Question

我想让我满意的div：

将长行文本换行并在文字末尾换行。

但是：ぁzxswい

https://jsfiddle.net/aisin/aL9fwggc/

Answer 1

你需要允许

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor" contenteditable="true">How can I wrap long lines here?</div>
    </div>
  </div>
</div>

缩小，所以如果你将.right改为flex: 1 0 auto（或flex-grow: 1），文本将会换行

flex: 1 1 auto

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 200px;
  height: 100%;
  background: #B1D27C;
}
.right {
  flex-grow: 1;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
}

---

根据评论更新

如果您有“Looooooooooooooooooooong”字样，则需要使用

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor"How can I wrap long lines here?  contenteditable="true">How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? </div>
    </div>
  </div>
</div>

word-break: break-all

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 200px;
  height: 100%;
  background: #B1D27C;
}
.right {
  flex-grow: 1;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
}

Answer 2

给.editor类赋予宽度：

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor"How can I wrap long lines here?  contenteditable="true">How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? How can I wrap long lines here? Loooooooooooooooooooooooooooooooooooooooooooooooooooooooong words </div>
    </div>
  </div>
</div>

Answer 3

你只需要定义

 .editor{
    width:362px;
 }

或.left的宽度就可以了

.right

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 25%;
  height: 100%;
  background: #B1D27C;
}
.right {
	width:75%;
  flex: 1 0 auto;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
}

Answer 4

我刚刚在

<div id="app">
  <div class="left"></div>
  <div class="right">
    <div class="msg"></div>
    <div class="editor-wrap">
      <div class="editor" contenteditable="true">How can I wrap long lines here?</div>
    </div>
  </div>
</div>

中添加了width: 1px，看起来像css hack。通过这种方式，无论输入一些正常的单词还是足够长的单词（例如：aaaaaaaaaaaaa ...），它都会很好地包裹，不会使.right超宽。

.right

*{margin: 0; padding: 0;}
#app {
  height: 300px;
  display: flex;
  max-width: 100%;
}
.left {
  min-width: 200px;
  height: 100%;
  background: #B1D27C;
}
.right {
  flex: 1 0 auto;
  height: 100%;
  background: #ccc;
  display: flex;
  flex-direction: column;
  width: 1px; /* add width */
}
.msg {
  height: 100px;
  background: #4E8DF4;
}
.editor-wrap {
  flex: 1;
}
.editor {
  background: #FECF45;
  height: 100%;
  width: 100%;
  word-wrap: break-word;
}