在css / js中换行 [英] word wrap in css / js

问题描述

我正在寻找一种跨浏览器方式，在预定宽度的div中包装没有空格（例如长网址）的文本的长部分。

以下是我在网络上发现的一些解决方案，以及为什么他们不为我工作：

• overflow：hidden / auto / scroll - 我需要在不滚动的情况下显示整个文本。


• 注射&害羞;到字符串通过js / server-side - & shy;现在支持FF3，但复制和粘贴带有& shy;在中间不会在Safari中工作。此外，据我所知，没有一个干净的方法来测量文本宽度，找出最好的字符串偏移来添加这些字符（有一个hacky的方式，见下一个项目）。另一个问题是，放大Firefox和Opera可以轻松打破这一点。


• 将文本转换为隐藏元素并测量offsetWidth - 与上述项目相关，向字符串中添加额外的字符。此外，测量长文本中需要的断点量可能需要成千上万的昂贵的DOM插入（每个子串长度一个），这可以有效地冻结网站。


• 使用等宽字体 - 再次，缩放可能会弄乱宽度计算，并且文本无法自由样式。

看起来很有希望但却不完整的东西：

• word-wrap：break-word 现在 CSS3工作草案的一部分，但它不支持Firefox，Opera或Safari。如果它今天在所有浏览器上都可以使用，那么这将是理想的解决方案：（


• 通过js / server端将注入< wbr>标签到字符串和粘贴网址适用于所有浏览器，但我仍然没有一个很好的方法来衡量在哪里放置休息。此外，此标签使HTML无效。


• 每个字符 - 它比成千上万的DOM插入更好，但仍然不理想（将DOM元素添加到文档中会占用内存并减慢选择器查询等）。

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

解决方案

哟！

  .wordwrap {
 white-space：pre-wrap; / * css-3 * / 
 white-space：-moz-pre-wrap; / * Mozilla，从1999 * / 
空格：-pre-wrap; / * Opera 4-6 * / 
空格： -o-pre-wrap; / * Opera 7 * / 
 word-wrap：break-word; / * Internet Explorer 5.5+ * / 
} 
  / pre> 
 
 
我刚刚发现这篇文章
  http://www.impressivewebs.com/word-wrap-css3/  
 
 
 
因此，您应该使用
  .wordwrap {
 word-wrap：break-word; 
} 
 
 .no_wordwrap {
 word-wrap：normal; 
} 
  
 
I'm looking for a cross-browser way of wrapping long portions of text that have no breaking spaces (e.g. long URLs) inside of divs with pre-determined widths.

Here are some solutions I've found around the web and why they don't work for me:


overflow : hidden / auto / scroll - I need the entire text to be visible without scrolling. The div can grow vertically, but not horizontally.
Injecting ­ into the string via js / server-side - ­ is supported by FF3 now, but copying and pasting a URL with a ­ in the middle will not work in Safari. Also, to my knowledge, there isn't a clean method of measuring text width to find out the best string offsets to add these characters to (there's one hacky way, see next item). Another problem is that zooming in Firefox and Opera can easily break this.
dumping text into a hidden element and measuring offsetWidth - related to the item above, it requires adding extra characters into the string. Also, measuring the amount of breaks required in a long body of text could easily require thousands of expensive DOM insertions (one for every substring length), which could effectively freeze the site.
using a monospace font - again, zooming can mess up width calculations, and the text can't be styled freely.


Things that look promising but are not quite there:


word-wrap : break-word - it's now part of CSS3 working draft, but it's not supported by either Firefox, Opera or Safari yet. This would be the ideal solution if it worked across all browsers today :(
injecting <wbr> tags into the string via js/ server-side - copying and pasting URLs works in all browsers, but I still don't have a good way of measuring where to put the breaks. Also, this tag invalidates HTML.
adding breaks after every character - it's better than thousands of DOM insertions, but still not ideal (adding DOM elements to a document eats memory and slows downs selector queries, among other things).


Does anyone have more ideas on how to tackle this problem?
解决方案
Css yo!
.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */ 
}
Also I just found this article
http://www.impressivewebs.com/word-wrap-css3/

So you should use
.wordwrap {  
    word-wrap: break-word;
}  

.no_wordwrap {  
    word-wrap: normal;
}  


                        
这篇关于在css / js中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！