如何使用CSS将长单词换行并避免水平滚动？
如何使用CSS将长单词换行并避免水平滚动？
我有以下的HTML代码：\n
长文本在这里
\n以及CSS代码：\n
.box {
宽度：400px;
高度：100px;
溢出：自动;
边框：1像素的金色实线;
}
\n我只想要垂直滚动条。但是当一个单词太长时，会出现横向滚动条。如何使长单词换行？\n如果需要，我可以使用jQuery或PHP的技巧，但我希望能够使用CSS来解决，因为这是CSS的工作。\n你可以在这里查看示例：http://jsfiddle.net/879bc/1/
问题：如何在换行时包裹长单词，并使用CSS避免水平滚动？
解决方法：过去我使用的解决方法是使用省略号库，例如jquery的http://dotdotdot.frebsite.nl/，您可以指定字符数，并在超过指定字符数后使用省略号，以使所有内容都适应一行。
问题出现的原因：长单词在一行无法完整显示，导致出现水平滚动条。
解决方法：使用CSS实现长单词在新行换行，并避免出现水平滚动条。
具体实现方法如下：
.word-wrap {
word-wrap: break-word; /* 将长单词在新行换行 */
overflow-wrap: break-word; /* 兼容旧版本浏览器 */
}
.no-scroll {
overflow-x: hidden; /* 隐藏水平滚动条 */
}
在需要进行换行的地方插入特殊字符``，或通过JS或PHP函数进行插入。
This is a long word.
这样就可以实现长单词在新行换行，并避免出现水平滚动条的效果了。
