wordwrap一个很长的string

你怎么能显示一个长的string,网站地址,单词或符号自动换行保持div宽度? 我猜想是一个类似的wordwrap。 通常添加一个空间的工作,但有一个CSS解决scheme,如自动换行?

例如它(很nastily)重叠的div,强制水平滚动等。wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwwwwwwwwwwwww

我可以在上面的string中添加什么,以便在div或浏览器窗口中的几行内整齐地排列它?

这个问题之前已经在这里问过了:

  • 谁解决了长篇大论 – 我的div问题? (提示:不是stackoverflow)
  • 在css / js中自动换行
  • CSS:我如何强制一个长string(没有任何空白)被包装在XUL和/或HTML
  • 长URL的CSS溢出

长话短说:

至于CSS的解决scheme,你有: overflow: scroll; 强制元素显示滚动条和overflow:hidden; 只是切断任何额外的文字。 有text-overflow:ellipsis;word-wrap: break-word; 但它们只是IE浏览器(CSS3草案中的诀窍),所以从现在开始这将是5年的解决scheme。

最重要的是,如果把这个文本包装到下一行,阻止这种情况发生是非常重要的,那么唯一合理的解决办法就是注入&shy; (软连字符),(分隔<wbr>标签)或者&#8203; (零宽度的空间,与&shy;减号相同的效果)在你的string服务器端。 但是,如果你不介意Javascript,那么这个连词似乎是相当稳固的。

word-wrap: break-word; 可以在IE7 +,FF 3.5和Webkit支持的浏览器(Safari / Chrome等)中使用。 要处理IE6,你还需要声明word-wrap: break-all;

如果FF 2.0不在您的浏览器matrix上,那么使用这些是一个可行的解决scheme。 不幸的是,它并没有断开前面一行,这是一个打字的恶梦。 我build议使用Paolo这个不引人注意的JavaScriptbuild议的Hyphenator。 对于不支持JavaScript的用户来说,后退将成为没有连字符的破碎词。 我现在可以忍受。 这个问题很可能出现在CMS中,网页devise者不能控制input什么内容,或者可以实现换行和软连字符。

我已经看了W3规范中讨论CSS3连字符的问题。 不幸的是,似乎有一些build议,但没有具体的。 看来浏览器供应商还没有实现任何东西。 我已经检查了Mozilla和Webkit的专有代码,但没有任何迹象。

word-break:break-all作品

刚才在这里提到过这个问题,但可能与这个问题更相关。 最好的财产不久将溢出包装。 如果得到实施,最好的价值是:

 * { overflow-wrap:hyphenate. } 

Doesen似乎还没有在iphone或firefox写作的时候得到任何支持,并且溢出包装:连字符甚至在工作草案中都没有。

在此期间,我会使用:

 p { word-wrap: break-word; -moz-hyphens:auto; -webkit-hyphens:auto; -o-hyphens:auto; hyphens:auto; } 
显示:块;
溢出:隐藏;
文本溢出:省略号;
宽度:200px;  //或任何对你最好的方法

我使用代码来防止所有长string,url等。

  -ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; 

希望有一天我们可以访问CSS3中的word-wrap属性: Force Wrapping:“word-wrap”属性 。

有一天…

通常细胞会自然而然地做到这一点,但是你可以强制这个行为在div上:

 div { width: 950px; word-wrap: break-word; display: table-cell; } 

总是指定line-height属性 – 如果你没有指定,可能会导致你的word-break: break-all;失败word-break: break-all; 属性。

这似乎是最新的Chrome的技巧:

 [the element], [the element] * { word-wrap: break-word; white-space: pre; } 

我没有检查任何浏览器,但铬。