自从从TABLE布局切换到DIV布局以来,一个常见的问题仍然存在:

问题:你用动态文本填充你的DIV,并且不可避免地有一个超长的单词延伸到div列的边缘并使你的网站看起来不专业.

RETRO-WHINING:表格布局从未发生过这种情况.表格单元格总是很好地扩展到最长单词的宽度.

严重性:即使是最主要的网站,我也会看到这个问题,特别是在德国网站上,即使是"速度限制"等常用词也很长("Geschwindigkeitsbegrenzung").

有没有人有这个可行的解决方案？

我正在寻找一种跨浏览器的方式来包装具有预定宽度的div内部没有间隔空格(例如长URL)的长文本部分.

以下是我在网络上发现的一些解决方案以及它们为什么不适合我:

• 溢出:隐藏/自动/滚动 - 我需要在不滚动的情况下显示整个文本.div可以垂直增长,但不能水平增长.
• 注射和害羞; 通过js/server-side 进入字符串 - ­ 现在由FF3支持,但用­复制和粘贴URL; 在中间将无法在Safari中工作.此外,据我所知,没有一种简洁的方法来测量文本宽度,以找出最佳的字符串偏移量来添加这些字符(有一种hacky方式,请参阅下一项).另一个问题是放大Firefox和Opera很容易打破这个问题.
• 将文本转储到隐藏元素并测量offsetWidth - 与上面的项目相关,它需要在字符串中添加额外的字符.此外,测量长文本中所需的中断量可能很容易需要数千个昂贵的DOM插入(每个子串长度一个),这可以有效地冻结站点.
• 使用等宽字体 - 再次,缩放可能会弄乱宽度计算,并且文本无法自由设置样式.

看起来很有希望但不完全存在的事情:

• 自动换行:break-word - 它现在是CSS3工作草案的一部分,但它还没有得到Firefox,Opera或Safari的支持.如果它适用于所有浏览器,这将是理想的解决方案:(
• 通过js/server-side 将<wbr>标签注入到字符串中 - 复制和粘贴URL适用于所有浏览器,但我仍然没有很好的方法来测量放置中断的位置.此外,此标记使HTML无效.
• 在每个字符后添加中断 - 它比数千个DOM插入更好,但仍然不理想(将DOM元素添加到文档中会占用内存并减慢选择器查询速度等).

有没有人对如何解决这个问题有更多的想法？

当在网络上呈现预先格式化的文本(例如代码示例)时,换行可能是个问题.您希望在不滚动的情况下进行可读性包装,但也需要对用户明确说明它是一行而没有换行符.

例如,您可能需要显示一个非常长的命令行,如下所示:

c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"

(Stackoverflow强制这样的一行不要换行.)

有没有一种使用CSS设计样式的方法来提供与书中看到的相同的处理方式？即包裹该行,但包括指示行继续的图像或字形.

显然我正在寻找一种可以应用于所有文本的样式,并让浏览器的XHTML/CSS渲染引擎找出哪些行已经包装,因此需要特殊处理.

解决方案到目前为止..

添加行继续标志符号

感谢Jack Ryan和Maarten Sander,有一个合理可行的解决方案,可以在包裹线的左侧或右侧添加连续字形.它需要在垂直方向上具有重复字形的图像,该图像是偏移的,因此如果只有一条未包装的线条则不可见.该技术的主要要求是每条线都需要在一个块内(例如p,span或div).这意味着它不能轻易地手动使用刚刚坐在前块中的现有文本.

下面的片段总结了基本技术.我在这里发布了一个实例.

.wrap-cont-l {
  margin-left: 24px;
  margin-bottom: 14px;
  width: 400px;
}

.wrap-cont-l p {
  font-family: Courier New, Monospace;
  font-size: 12px;
  line-height: 14px;
  background: url(wrap-cont-l.png) no-repeat 0 14px; /* …