Question

在父div中，我有一个较小的侧容器#sideNavContainer，在另一侧（右侧）是内容的另一个div。

当我将包含不长空格的长字的文本放入#sideNavContainer中时，这些字开始从容器中突围而出，并覆盖右侧（内容区域）的内容。

我试图强迫#sideNavContainer的内容分解这些词，以便当它们到达容器的右端时继续在下一行，但我对100％的满意度不满意最好在空格上也打破单词/句子。长单词应从下一行开始，然后分解，而不是与其他文本在同一行（在空格之后）开始，然后继续（但要断开）。

下面是一些例子，希望可以说明我的意思：

<div>
  <div id="sideNavBox">
    <span>Navigation and other Stuff</span>
    <div id="subContainer">
      I am a very long Text andIevenContainVeryLongWordsWithout spaces but my parent container(s) should not ChangeTheirWidthBecauseOfThis and break whenThereAreSpaces but longWordsWithoutSpaces shouldBeBrokenDown.
    </div>
  </div>
  <div id="contentBox">
    Hello, I am the main content
  </div>
</div>

CSS：

body {
  background-color: green;
}

#sideNavBox {
  float: left;
  margin-left: 20px;
  width: 180px;
  background-color: blue;
}
#subContainer {
  background-color: grey;
  word-break: break-all;
}
#contentBox {
  background-color: yellow;
}

提琴：https://jsfiddle.net/qp74uxkt/11/

我的期望/期望是在“我是一个很长的文本”一词之后将文本打断，然后在下一行继续输入“ andIevenContain ...”，然后可以将该长词打断。可用空间，取决于父容器的限制。当我使用“连字符：自动；”时，这也不起作用。可以做到吗？

Answer 1

您可以将断词属性设置为断词。我已经更新了您的代码并创建了一个新的小提琴。我认为它将解决您的问题 Check it out https://jsfiddle.net/yvLb6zer/

Answer 2

如果长字的数量不太大，我建议不要使用任何query = sql.SQL("CREATE TABLE {t} ({c} %s)").format( t=sql.Identifier(table_name), c=sql.Identifier(column_name)).as_string(cu) cu.execute(query, [AsIs(column_type)])设置，而是在这些长字中的以下位置插入“软连字符”在语法上是正确的。

软连字符是一个看起来像这样的实体：word-break。因此，如果您有，则可以将其更改为whateverwonderfullongword。如果它适合宽度，它将作为一个整体写入；如果不适合，则它将在whateverwonderfullongword实体的最新可能位置处（带有连字符）中断，如下例所示。< / p>

&shy;

自动在DIV容器中分解长单词，但更喜欢在空格处换行

2 个答案: