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

Question

我想让我满意的div：

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

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

<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>

Answer 1

您需要允许.right缩小，因此如果您将flex: 1 0 auto更改为flex-grow: 1（或flex: 1 1 auto），则文字将换行

＆＃13;

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

根据评论进行更新

如果你有＆＃34; Looooooooooooooooooooong＆＃34;您需要使用word-break: break-all

的字词

＆＃13;

＆＃13;

*{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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

给.editor类赋予宽度：

 .editor{
    width:362px;
 }

Answer 3

您需要定义.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;
}

<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>

Answer 4

我刚刚在function insensitiveReplaceAll(s, f, r) { const lcs=s.toLowerCase(), lcf = f.toLowerCase(), flen=f.length; let res='', pos=0, next=lcs.indexOf(lcf, pos); if (next===-1) return s; do { res+=s.substring(pos, next)+r; pos=next+flen; } while ((next=lcs.indexOf(lcf, pos)) !== -1); return res+s.substring(pos); } console.log(insensitiveReplaceAll("Find aBc&deF abcX", "abc", "xy")); console.log(insensitiveReplaceAll("hello", "abc", "xy"));中添加width: 1px，看起来像css hack。 通过这种方式，无论输入一些正常的单词还是足够长的单词（例如：aaaaaaaaaaaaa ...），它都会很好地包裹，使.right超宽。

＆＃13;

＆＃13;

.right

＆＃13;

*{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;
}

＆＃13;

＆＃13;

＆＃13;