Question

我从css flex开始，我很难使用contenteditable，当文本太长时，我无法防止水平扩展。我试过了： - Chrome - Firefox - 歌剧 - 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可能不那么复杂（将div分成div），但请记住，我尽可能地清理代码，以便在设计要求时将其呈现给您。但是，我决定展示结构的相关部分，因为解决问题可能很重要。

这是结果的JSFiddle：

https://jsfiddle.net/b4er9tLg/2/

如果在其中一个框中键入文本，当文本足够长时，它将展开其包含的div并更改页面的整体布局。（如果它不能在您的浏览器上执行此操作，那么您的浏览器就是少数人之一。）

基本上，我需要的是在所有文本浏览器上获得类似隐藏溢出的内容，以便整体设计不会中断。我无法让它发挥作用。

感谢您的帮助。

Answer 1

您已将.column属性flex: 1。来自规范

w3

flex：＆lt; positive-number＆gt;
相当于flex：＆lt; positive-number＆gt; 1 0.使弹性项目具有灵活性，并将弹性基础设置为零，从而生成一个项目接收flex中指定比例的可用空间容器。如果Flex容器中的所有项目都使用此模式，则为其尺寸将与指定的弯曲系数成比例。

要防止column及其内容展开，您需要为其提供max-width值。

我还建议从margin-right删除.column。而是设置列宽并使用容器上的justify-content属性。

fiddle

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

防止contenteditable（在flex div中）扩展

1 个答案: