0

http://jsfiddle.net/awWmY/

对于我的生活，我无法解决这个简单的问题。为什么文本不会换行#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;
}
4

6 回答 6

1

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

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

于 2012-08-14T22:20:17.197 回答
1

添加word-break: break-word;到您的#bigEnoughCSS 将强制单词换行，但不会anchor在几个标签之间的断点处。我不知道这是否是您想要实现的行为，但这里有一个演示：jsFiddle。

希望以任何方式有所帮助！

于 2012-08-14T22:17:39.930 回答
0

正如其他人所指出的，您确实应该在a元素之间留一些空白。但是，如果您无法更改标记，则可以在生成的内容中注入不间断空格 U+200B（这是换行的机会）：

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

通常的 CSS 警告适用。

于 2012-08-14T22:15:36.403 回答
0

不确定您要达到的目标，但如果这是您需要的，您可以尝试

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

演示。

于 2012-08-14T22:22:11.337 回答
0

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

于 2012-08-14T22:12:00.503 回答
0

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

Hyphenator 是一种 JavaScript 解决方案，它可以自动换行长词，以便它们适合其父容器，并在换行的位置插入连字符。

于 2012-08-14T22:13:57.343 回答