css中实现字符超出宽度自动换行和英语字符不断行的解决方法

为了使英语字符不断开，我在显示内容的style是text-align:justify; text-justify:inter-ideograph。可是这样子在后台添加内容时，如果不是键盘输入的，而是copy到输入框里的话，这样前台显示出来的帖子内容会把表格撑得很宽。有人说采用自动换行就会解决这个问题style=”word-break:break-all”。可是这样一来，英语单词又断了。如何才能将这两个矛盾统一起来呢？

---

参考的帖子是这样的：

• overflow:hidden：超出溢出，通俗点就是超出不显示
• word-wrap:break-word：自动段字换行。可能是针对与中文字。
• word-break:break-all：是段字换行。它与上面的区别在于，可以断掉一些
  较长的英文字母，使表单不至于撑破。主要针对于英文。

以下是详解：

三种样式都不写的情况下（只举英文例子）div的宽度是100px：

ni nia nia nidad niadnai nida nin andisdn nidasndadsfsdf dasdasdadad ada .

第二种情况只写overflow:hidden div的宽度是100px:
ni nia nia nidad niadnai nida nin

第三种情况overflow:hidden; word-wrap:break-word; div的宽度是100px;

ni nia nia nidad niadnai
nidasndadsfsdf nin ninniadnai nida nin .
注意：由于nidasndadsfsdf的单词太长所以不能给断开，所以，整个词给断下来了。

第四种情况overflow:hidden; word-wrap:break-word; word-break:break-all;div宽度还是100px。

ni nia nia nidad niadnai nidasnda
dsfsdf nin ninniadnai nida nin .

注意：由于nidasndadsfsdf的单词被断开了。
上面的测试都没有问题，但是放到我的内容上面仍然还有问题。
最后，参考了很多论坛，终于找出了问题

问题原来出在
空格的ASCII码为32，字符实体 的名字叫做”不中断空格”，其ASCII码为160。虽然显示出来可能 和空格一样，但浏览器可能不会将其和空格一样对待，所以那串英文成了一个”单词”，不会自动换行。

你只需将 再替换回去，而且在你的后台程序中将那句替换空格的语句去掉，如果这样会影响到排版，也可以将那句replace改成将两个空格替换成一个全角空格或两个 ，这样不会影响到单词间的单个空格。

原文链接

总结

以上是生活随笔为你收集整理的css中实现字符超出宽度自动换行和英语字符不断行的解决方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。