FF 不显示自动换行 CSS 属性
我正在 WordPress 框架内进行试验，试图让博客文章标题出现在一个大的方块中，如果需要保持形状，则在单词中间出现换行符。
使用 word-wrap 和（显然）word-break CSS 属性，我在 Safari/Chrome 中得到了我想要的外观。 Firefox 7 拒绝将这些单词分开。 IE 的表现比 FF 稍好，但它的换行似乎更加随意（而且，IE 目前并不是真正的优先事项）。主要是我想弄清楚为什么 word-wrap 和/或 word-break 在 FF 的这个实例中不起作用。
- 我没有使用表格。
word-break似乎是这里的活动 CSS 属性。当我删除它并在 Safari/Chrome 中测试页面时，这些行停止在单词中间中断。- 我认为任何自动应用的 WordPress 类（hentry、格式标准等）都没有发挥作用，但如果我错了，请纠正我。除了 jsfiddle 链接中显示的样式之外，其他 CSS 是标准的 211 WP 主题。
一个实例：（简化但准确的 HTML/CSS）： http://jsfiddle.net/3U4Xc/1/< /a>
任何意见都会受到赞赏。
I'm experimenting within a Wordpress framework, trying to get blog post titles to appear in a large square block, with line breaks appearing mid-word if necessary to maintain the shape.
Using the word-wrap and (apparently) word-break CSS properties, I got the look I wanted... in Safari/Chrome. Firefox 7 refuses to break the words apart. IE does slightly better than FF, but its line breaks seem way more arbitrary (also, IE isn't really a priority at this point). Mainly I'm trying to figure out why word-wrap and/or word-break wouldn't be working in this instance in FF.
- I'm not using tables.
word-breakseems to be the active CSS property here. When I removed it and tested the page in Safari/Chrome, the lines stopped breaking mid-word.- I don't think any automatically applied Wordpress classes (hentry, format-standard, etc.) are playing a role, but correct me if I'm wrong. Other than the styling shown in the jsfiddle link, the other CSS is standard Twenty Eleven WP theme.
A live example: (simplified but accurate HTML/CSS): http://jsfiddle.net/3U4Xc/1/
Any input is appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
它不起作用，因为 Firefox 7 不支持
分词。附带说明一下，这不能解决您的问题
white-space: -moz-pre-wrap;在 Firefox 7 中也不起作用。它应该是white-space: pre-wrap;It doesn't work because Firefox 7 doesn't support
word-break.On a side note which won't solve your problem
white-space: -moz-pre-wrap;will not work in Firefox 7 either. It should bewhite-space: pre-wrap;由于您的 div 使用 text-align:justify，因此您不会再进一步。此外，代码中的空白可以简化为空白：pre;然而，一侧的文本对齐与另一侧的预格式化并不一致。我想不太确定 HTML5 的断字问题。您究竟想要实现什么目标？某些/未/破坏或破坏的东西，您想要在哪里分开？请注意，但屏幕尺寸和用户设置一直因破坏静态定位而臭名昭著。
Since your div is using text-align:justify, you wont get any further. Also, white-space in your code may be simplified to white-space:pre; However, text-align on one side, versus pre-formatted on the other don't make friends. Not too sure about that word-break thing, HTML5, I suppose. What exactly are you trying to achieve? Something /not/ breaking, or breaking, where you want the split? Mind me, but screen sizes and user settings have always been notorious for screwing any static positioning.