如何使用flex包装contenteditable div中的长行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用flex包装contenteditable div中的长行相关的知识，希望对你有一定的参考价值。
你需要允许<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;
}给.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>你只需要定义 .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;
}我刚刚在<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;
}以上是关于如何使用flex包装contenteditable div中的长行的主要内容，如果未能解决你的问题，请参考以下文章