需求：

為了使英語字符不斷開，我在顯示內容的style是text-align:justify; text-justify:inter-ideograph。可是這樣子在后臺添加內容時，如果不是鍵盤輸入的，而是copy到輸入框里的話，這樣前臺顯示出來的帖子內容會把表格撐得很寬。有人說采用自動換行就會解決這個問題style=”word-break:break-all”。可是這樣一來，英語單詞又斷了。如何才能將這兩個矛盾統一起來呢？

參考的帖子是這樣的：

overflow:hidden的意思是超出溢出，通俗點就是超出不顯示。

word-wrap:break-word的意思是自動段字換行。可能是針對與中文字。

word-break:break-all的意思也是是段字換行。它與上面的區別在于，可以斷掉一些 較長的英文字母，使表單不至于撐破。主要針對于英文。

以下是詳解：

1、三種樣式都不寫的情況下(只舉英文例子)div的寬度是100px：

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

2、第二種情況只寫overflow:hidden div的寬度是100px:

ni nia nia nidad niadnai nida nin

3、第三種情況overflow:hidden; word-wrap:break-word; div的寬度是100px;

ni nia nia nidad niadnai

nidasndadsfsdf nin ninniadnai nida nin .

注意：由于nidasndadsfsdf的單詞太長所以不能給斷開，所以，整個詞給斷下來了。

4、第四種情況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改成將兩個空格替換成一個全角空格或兩個?，這樣不會影響到單詞間的單個空格。

造成這樣的問題是由于編輯器的bug，使用的是ckeditor，之前一直都沒有問題，格式化核心JS文件后就有了這個bug，修改的那叫一個汗啊，看來以后下載第三方插件的JS不能隨便格式化或者凈化了

總結

以上是生活随笔為你收集整理的html字体变大自动换行,网页css中实现字符超出宽度自动换行和英语字符不断行的解决方法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。