Question

如果可能的话，我正在尝试按单词打断文本，如果不能，则无论如何都要打断，以使布局不会消失。默认情况下，这在google chrome中有效，并且可以正确包装，但是在Firefox中则无效。

.a {
  width: 200px;
  word-wrap: break-word;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

.a>div {
  text-align: left;
  display: inline-block;
}

<div class="a">
  <div>

    achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri

  </div>
</div>

http://jsfiddle.net/prswjktc/12/

在小提琴中添加max-width: 100%;可以解决问题，但是我正在寻找替代解决方案。（我也无法删除内部div。）

Answer 1

我们在这里：-）

将您的单词（或术语）放入drawer: Drawer( child: ListView( padding: EdgeInsets.zero, children: const <Widget>[ DrawerHeader(...), Divider(), //here is a divider Text("subtitle", style: TextStyle(...), ) ListTile(...), ListTile(...), Divider(), //here is a divider ListTile(...), //rest of your items ], ), ), s中。
设置为
- <span>（这样他们就可以获得所需的所有宽度）
- display: inline-block（因此，是的，如果列超出，则会被砍掉）
- max-width: 100%; overflow: hidden（所以他会中断如果有斩获
- 旧版备份（请考虑overflow-wrap: break-word）：-moz-whatever

代码：

word-wrap: break-word

full Codepen

Answer 2

将word-break:break-all;添加到子选择器（.a > div）

https://jsfiddle.net/f4bdx7z9/1/

.a {
  width: 200px;
  word-wrap: break-word;
  display:inline-block;
  white-space:normal;
  word-break:break-word;
}

.a > div {
  text-align:left;
  display:inline-block;
  word-break:break-all;

}

<div class="a">
<div>

achrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachriachrichteinenachrichteinenachrichtchrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachrichteinenachri

</div>
</div>

Answer 3

您可以使用CSS3属性overflow-wrap，它可能就是您想要的。在MDN处了解更多信息，包括有关浏览器的支持，但要旨是：“与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行上时才会产生中断不会溢出。”

还要注意，您拥有的200px宽度不在包含长文本的div上，而是在.a父div上，并且带有长文本的div具有display: inline-block，因此当前其宽度将由其内容确定，它将溢出固定宽度的.a父div。要解决此问题，请给内部div（.a > div）一个显式宽度（可以为200px或100％，或者您的布局实际需要的任何宽度），或者通过删除{{1 }}和/或明确设置display: inline-block。

这是一个有效的代码段，其中我将.a> div保留为内联块，并创建了另一个div .b，其中.b> div是一个块：

display: block

.a {
  width: 200px;
  word-wrap: break-word;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

.a>div {
  text-align: left;
  width: 100%;
  display: inline-block;
  overflow-wrap: break-word;
}

.b {
  width: 200px;
  display: inline-block;
  white-space: normal;
}

.b>div {
  text-align: left;
  display: block;
  overflow-wrap: break-word;
}

逐字打断文字，如果没有空格则反正打断

3 个答案:

我们在这里：-）

full Codepen