我們經常會遇到這樣的問題，純數字不能自動換行，連續輸入的英文不能換行，或者篇文章中一行到達容器的末端以後沒有在我們想要的位置進行換行，換行後會截斷某個單詞等問題，今天我們就說說css中關於換行的一些屬性，和使用技巧在介紹之前我們先來看一下瀏覽器預設情況下文字的超出容器的處理情況：
案例展示：
通過上邊的例子可以看出：
連續的數字不會自動換行；
連續的字母不會自動換行；
英文文章中空格是由**實現的空格不會換行；
英文單詞不會在中間換行，在單詞中間到達容器邊緣，此單詞會另起一行顯示。
中文不會在文字和標點符號間換行，如果遇到標點符號到達容器的邊緣，那麼標點符號的前乙個字會跟著折下來。
容器中是連續的的話會自動換行顯示。
我們在處理一些文字超過容器的時候換行的問題。一般我們處理換行的css屬於主要用到：
用於設定瀏覽器處理自動換行的方式語法：
word-break：normal | keep-all | break-all | break-word；word單詞的意思，break打破、間斷的意思。連起來得意思就好理解了：單詞和文字之間的間斷方式。
normal：預設值，表示使用瀏覽器的預設的換行規則，依照亞洲語言和非亞洲語言的文字規則，允許在句內換行。
keep-all：表示保持單詞和句子的完成性，也就是說，英文中不會再單詞內換行，中文不會在非標點符號內換行。
檢視例項：
個人測試：連續字母和數字不會自動折行firefox 27.01版本的支援此屬性。會使中文保持不換行，一直在一行顯示。只有輸入
強直換行，對英文貌似不起作用。
ie6-11，利用ie11的除錯模式進行測試的，對中文只有遇到標點符號後，後邊的文字才能自動折行。
chrome、safari，對此屬性不起作用，文字和normal效果一樣，文字到容器邊緣自動換行，單不會在標點符號內換行。
break-all：(中斷全部的) 該行為與亞洲語言的normal相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字，比如使連續的英文本母間斷行。
檢視例項：
break-word：屬性和下邊的overflow-wrap:break-word表現差不多，唯一的區別在**連續英文本串換行上，前者可以讓**單元格中的連續英文自動換行，後者不行。
個人測試：連續的字母和數字會自動折行firefox,chrome,safari等瀏覽器在中文和英文狀態下顯示效果一樣當內容到達容器邊緣都允許在標點符號和單詞中間換行，允許標點符號在行首。
ie6-11，等瀏覽器在中文和英文狀態下顯示效果一樣當內容到達容器邊緣也是允許單詞和句子中間換行，但是他不允許標點符號在行首顯示，如果內容到達邊緣後第二行行首剛好是標點符號，他會讓上乙個單子尾字母或中文的漢子跟隨標點符號一起換行。
這個屬性是用來說明當乙個不能被分開的字串太長而不能填充其包裹盒時，為防止其溢位，瀏覽器是否允許這樣的單詞中斷換行。語法：這裡放到一起介紹的是因為 word-wrap 屬性原本屬於微軟的乙個私有屬性，在 css3 現在的文字規範草案中已經被重名為 overflow-wrap 。 word-wrap 現在被當作 overflow-wrap 的 「別名」。 chrome 和 opera 瀏覽器都支援這種新語法。
/* old */
word-wrap：normal | break-word；
/* new */
overflow-wrap
: normal | break-word | anywhere;
normal：預設值，允許內容頂開或溢位指定的容器邊界，也就是長單詞不換行
anywhere：
web-kite,和ie各瀏覽器顯示效果一樣，允許連續的字母和數字等內容到達容器邊緣後強直換行，和word-break:break-all的區別在於，word-wrap:break-word;不允許在英文單詞間換行、標點符號在行首。word-break:break-all則允許英文單詞間分開單詞換行、標點符號在行首顯示。但是ie下標點符號在行首顯示不起作用。案例展示：
如果要在**下讓連續的字母或數字換行，使用word-break:break-all;可以達到換行目的但是相應的單詞和標點符號會在中間折行。使用word-wrap:break-word;不起作用。解決方法是給**定義table-layout:fixed;
當然在元素中使用了white-space:pre/nowrap的話，word-wrap:break-wrap和word-break:break-word;都將失去作用，使中文，英文都在同一行顯示，不會換行.在換行中有時還會涉及到：設定或檢索物件內空格的處理方式。
用於設定元素物件內空格的處理方式語法：
white-space
: normal | pre | nowrap | pre-wrap | pre-line | break-spaces；
normal：瀏覽器的預設處理方式 連續的空白符會被合併，換行符會被當作空白符來處理 文字自動換行。
pre： 用等寬字型顯示預先格式化的文字，不合併文字間的空白距離，當文字超出邊界時不換行，在遇到換行符或者
元素時才會換行。
nowrap：強制在同一行內顯示所有文字，合併文字間的多餘空白，直到文字結束或者遭遇br物件。
pre-wrap：用等寬字型顯示預先格式化的文字，不合併文字間的空白距離，當文字碰到邊界時發生換行。
pre-line：保持文字的換行，不保留文字間的空白距離，當文字碰到邊界時發生換行。
break-spaces：
案例展示：
當white-sace設定成nowrap的時候word-break和word-wrap設定換行的將都不生效。
當white-space設定成pre的時候word-break換行將不生效。word-wrap換行僅對文字和字元生效如果容器中是的話，將不換行。塊級元素和行內塊級元素顯示效果一樣。
你真的了解Java中的Instanceof嗎？
instanceof 是乙個簡單的二元操作符，它是用來判斷乙個物件是否是乙個類例項的 boolean b1 sting instanceof object b1為true因為string是object的子類 boolean b2 new string instanceof string b2為tru...
你真的了解Java中的Instanceof嗎？
instanceof 是乙個簡單的二元操作符，它是用來判斷乙個物件是否是乙個類例項的 boolean b1 sting instanceof object b1為true因為string是object的子類 boolean b2 new string instanceof string b2為tru...
你真的了解嗎 CSS 溢位 浮動 定位
position sticky overflow 屬性用於控制內容溢位元素框時顯示的方式 屬性值描述 visible 預設值。內容不會被修剪，會呈現在元素框之外 hidden 內容會被修剪，並且其餘內容是不可見的 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容 auto 如果內...