防止可满足的(在柔性div中)扩展
防止可满足的(在柔性div中)扩展
提问于 2017-11-06 14:13:57
我从css flex开始，我很难使用一种内容可编辑的方法，当文本太长时，我无法阻止它水平扩展。我试过：- Chrome - Firefox - Opera - Safari
他们都做了div扩展，但Safari，谁做了我所期望的。
下面是HTML：
<div class="container">
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
</div>下面是CSS：
.container
{
width: calc(100% - 34px);
height:185px;
margin-left:17px;
margin-top:17px;
display:flex;
}
.column{
flex:1;
height:186px;
margin-right:1.75%;
}
.column:nth-child(5){
margin-right:0px;
}
.field{
margin-bottom:5px;
display:flex;
width:100%;
}
.field_left{
width:6px;
height:24px;
background:green;
}
.field_middle{
height:24px;
background:red;
width:calc(100% - 13px);
}
.field_right{
width:7px;
height:24px;
background:blue;
}
[contenteditable]
{
display:inline;
white-space: nowrap;
overflow:hidden;
text-overflow: inherit;
-webkit-user-select: auto;
user-select: auto;
-moz-user-select: -moz-text;
}当然，对于这样的结果，HTML可能不那么复杂(从divs到divs到div)，但是请记住，我尽可能地清理了代码，以便在设计要求时将其呈现给您。但是，我决定展示结构的相关部分，因为修复这个问题可能很重要。
下面是结果的JSFiddle：
https://jsfiddle.net/b4er9tLg/2/
如果您在其中一个框中键入文本，则当文本足够长时，它将展开其包含的div并更改页面的总体布局。(如果你的浏览器没有这样做，那么你的浏览器就是少之又少)。
基本上，我需要的是在所有的文本浏览器上得到类似于隐藏溢出的信息，这样整个设计就不会中断。我就是没法让它起作用。
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-11-06 14:30:44
您已经给了.column属性flex: 1。从规范中
flex： 相当于弹性:10。使flex项具有灵活性，并将flex基设置为零，从而在flex容器中接收指定比例的空闲空间。如果flex容器中的所有项都使用此模式，则它们的大小将与指定的flex因子成正比。
为了防止column和它的内容展开，您需要给它一个max-width值。
我还建议从margin-right中删除.column。相反，设置列宽度并在容器上使用justify-content属性。
.container {
width: calc(100% - 34px);
height: 185px;
margin-left: 17px;
margin-top: 17px;
display: flex;
justify-content: space-between;
}
.column {
flex: 1;
height: 186px;
max-width: 19%;
}
.field {
margin-bottom: 5px;
display: flex;
width: 100%;
}
.field_left {
width: 6px;
height: 24px;
background: green;
}
.field_middle {
height: 24px;
background: red;
width: calc(100% - 13px);
}
.field_right {
width: 7px;
height: 24px;
background: blue;
}
[contenteditable] {
display: inline;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
-webkit-user-select: auto;
user-select: auto;
-moz-user-select: -moz-text;
}<div class="container">
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
<div class="column">
<div class="field">
<div class="field_left"></div>
<div class="field_middle" contenteditable="true"></div>
<div class="field_right"></div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47138919
复制相关文章
相似问题
腾讯云开发者
