当文本很长时,如何在弹出显示中断字？

Question

我需要创建一个响应式Web,以便父级的宽度是动态的.有两个弹性项目,一个是长(动态),另一个是短(静态).

我希望结果看起来像第二行,长文本被打破(或重叠时隐藏),短文本总是正确显示.

我尝试使用,flex-shrink: 0但似乎总是有溢出.

在这种情况下如何摆脱溢出？

我确实需要flex布局,不应该涉及js.

.parent {
  display: flex;
  flex-direction: row;
  width: 15rem;
  background: yellowgreen;
  padding: 10px;
  overflow: hidden;
}
.flex-item {
  width: 10em;
  padding: 10px;
  background: yellow;
  flex: 1 1 50%;
}
.block1 {
  background: red;
}
.block2 {
  background: orange;
}
.nos {
  flex-shrink: 0 !important;
}

<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglonglonglonglonglonglonglonglonglonglong
    </div>
  </div>
  <div class="flex-item nos">
    <div class="block2">
      Display
    </div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">
      longlonglonglonglong...
    </div>
  </div>
  <div class="flex-item">
    <div class="block2">
      Display
    </div>
  </div>
</div>

https://jsfiddle.net/templefox/Lw3hhz8j/

Answer 1

只需将word-break:break-all属性放入其parentdiv。您可以通过单击此JSFiddle 链接来实时查看它

Answer 2

.parent {
   display: flex;
   width: 15rem;
   padding: 10px;
   background: yellowgreen;
   /* overflow: hidden       <-- not necessary at this point */
   /* flex-direction: row    <-- default value; can be omitted */
}
.flex-item {
   /* width: 10em            <-- not necessary at this point */
   /* flex: 1 1 50%          <-- not necessary at this point */
   padding: 10px;
   background: yellow;
   display: flex;            /* new */
   min-width: 0;             /* see note #1 */

}
.block1 {
   width: 10em;
   overflow: hidden;         /* see note #2 */
   text-overflow: ellipsis;  /* see note #2 */
   white-space: nowrap;      /* see note #2 */
   background: red;
}
.block2 {
  background: orange;
}

/* .nos { flex-shrink: 0 !important; } */

<div class="parent">
  <div class="flex-item">
    <div class="block1">longlonglonglonglonglonglonglonglonglonglonglonglonglong</div>
  </div>
  <div class="flex-item">
    <div class="block2">Display</div>
  </div>
</div>
<br/>
<div class="parent">
  <div class="flex-item">
    <div class="block1">longlonglonglonglong...</div>
  </div>
  <div class="flex-item">
    <div class="block2">Display</div>
  </div>
</div>

修改后的小提琴

笔记：

1. 为什么弹性项目不会缩小到超过内容大小？
2. 将省略号应用于多行文本