css - 打破 flex 元素中的长词

Question

我想在“div2”中打断长字，div2 和 div3 的宽度都不能大于父宽度(即 150px)。唯一有效的是 word-break: break-all 但这也会打断短词。

#div1{
    display: flex;
    max-width: 150px;
    height: 100px;;
}
#div2{
    background-color: gray;
}
#div3{
    background-color: rgb(197, 181, 181);
}
#div4{
    width: 150px; 
    background-color: rgb(144, 199, 172);
}

<div id="div1">
        <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
        <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

Answer 1

您可以使用break-word 只在单词中打断

#div1 {
  display: flex;
  max-width: 150px;
  height: 100px;
  ;
}

#div2 {
  background-color: gray;
  word-break: break-word;
}

#div3 {
  background-color: rgb(197, 181, 181);
}

#div4 {
  width: 150px;
  background-color: rgb(144, 199, 172);
}

<div id="div1">
  <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

和 break-all 在任何给定点中断

#div1 {
  display: flex;
  max-width: 150px;
  height: 100px;
  ;
}

#div2 {
  background-color: gray;
  word-break: break-all;
}

#div3 {
  background-color: rgb(197, 181, 181);
}

#div4 {
  width: 150px;
  background-color: rgb(144, 199, 172);
}

<div id="div1">
  <div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="div3">oooo</div>
</div>

<div id="div4">150 px - max width</div>

有关 MDN 的更多信息.

希望这有帮助:)