Question

对于我的生活，我无法解决这个简单的问题。为什么文本不会换行到#bigEnough？

html{background:black;}

#bigEnough {
  width: 500px;
  text-wrap: normal;
}
#bigEnough a {
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}
#tagCloud {
  height: 500px;
  width: 500px;
  float: right;
  margin: -45px 0;
}

Answer 1

将word-break: break-word;添加到#bigEnough CSS会强制文字在几个anchor标记之间的断点处换行，但不。我不知道这是否是你想要实现的行为，但这是一个演示：jsFiddle。

希望以任何方式提供帮助！

Answer 2

我能找到的最简单的解决方案（完全跨浏览器实现）是在display: inline-block元素上使用a：JS Fiddle demo。

请注意，我还增加了页面的宽度，以显示单词也将占用空间可用的相同行。

Answer 3

因为自动换行取决于单词之间是否有空格。

Answer 4

其他人是对的，你需要用空格来包装。但是，如果你想避免这样做，我已经取得了成功：

Hyphenator

Hyphenator是一个JavaScript解决方案，可以自动包装长单词，使它们适合父容器并插入包裹的连字符。

Answer 5

正如其他人所说，你应该在a元素之间留下一些空白。但是如果你不能改变标记，你可以用生成的内容注入不间断空格U + 200B（这是破线机会）：

#bigEnough a:after { content: "\200B"; }

通常的CSS注意事项适用。

Answer 6

不确定您要尝试的是什么，但如果您需要，可以试试这个

#bigEnough a {
    display:inline-block;
    /* rest of your styles*/  
}

DEMO

所有锚点时，文本不会换行到元素

6 个答案: