文字換行和空格控制

一旦團隊把體驗提上日程，那意味着考驗你基本功的時候到了。在諸多體驗中，文本的體驗很是重要，文本的處理也很是靈活多變，在此記錄下文本經常使用佈局。

1. 文本換行控制

提到文本的換行，不得不提幾個屬性: white-space、word-break、word-wrap。這幾個屬性都對單詞換行起做用，咱們分別來看。

1.1 white-space

white-space屬性描述空白字符在元素中如何表現以及控制換行，這類空白字符包括

* space（空格）
* enter(回車)
* tab(製表符)

他有如下幾個屬性值:

* normal: 合併空白字符和換行符
* nowrap：合併空白字符，文字不換行
* pre:空白字符不合並，文字只在有換行符的地方換行
* pre-wrap: 保留空白符序列，可是正常地進行換行
* pre-line：合併空白符序列，可是正常地進行換行

咱們用下面這段文字說明不一樣屬性值的表現效果：

<p>Out of the box,    webpack only understands JavaScript and JSON files. pneumonoultramicroscopicsilicovolcanoconiosis Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.</p>

下圖是不一樣屬性值的效果圖:

從上圖中能夠看到:
normal時 連續的空格會被縮減成一個（好比webpack前的四個空格標合併成了一個），句子超過一行後會自動換行，而長度超過一行的單個單詞會超出邊界；
nowrap也會合並空白符，可是整個段落不換行；
pre也是不換行，和nowrap相比，保留了文字中的空白；
pre-wrap 保留空白，句子超過一行自動換行，長單詞不換行；
pre-line 空格空白，句子超過一行自動換行，長單詞不換行。

1.2 word-break

強調單詞會怎樣拆分換行，好比長單詞會不會換行
word-break有三個值:

* normal
* break-all
* keep-all

keep-all: 單詞不會被拆開換行；
break-all: 無論長單詞仍是短單詞，碰到邊界，一概強制換行。是對單詞不友好的一中換行方式。三者方式效果以下圖:

1.3 word-wrap

word也是處理 單詞如何拆分換行,從word-break 效果能夠看到，要麼是 單詞不拆分keep-all(遇到長單詞會超出元素)，要麼是 單詞均可能被拆分break-all(長單詞、短單詞遇到邊界都會被拆分換行)。那麼能不能 只有長單詞才拆分換行呢(換句話說就是隻有 一個單詞長度超過一行的時候纔會拆分)？ word-wrap 就是爲了補充 word-break 而產生的。
word-wrap 只有2個值:

• normal
• break-word.

如上介紹，word-wrap: break-word效果.

2. 文本溢出顯示省略號

知道文字如何控制換行以後，爲了保持文字整齊性，咱們常常想大段文字超過一行不要換行，但同時也不要超過邊界，超過的文字使用省略號顯示。

單行文本溢出顯示

有了上面的基礎，單行溢出顯示就很是簡單了，原理就是不讓換行 + 超出的文本 overflow, 也就是下面這樣

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出顯示

white-space: nowrap; 會控制文字只能顯示一行，若是想要最多顯示x行，多出的則顯示省略號，怎麼辦呢？ 目前的解決辦法是:

display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;

因使用了WebKit的CSS擴展屬性，該方法適用於 WebKit瀏覽器及移動端.
其中，
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合display: -webkit-box; WebKit屬性，對象做爲彈性伸縮盒子模型顯示。
以下圖:

3 參考資料

https://www.baidu.com/link?ur...

https://www.cnblogs.com/dfyg-...

https://www.cnblogs.com/gopar...張鑫旭《css世界》