HTML如何控制文字的換行、斷行後不顯示等等

基本上文字容器我慣用的是<label>
這個label的css控制碼當中，如果你不設定寬、高或任何其他控制碼，
那就是有多少文字，他就秀多少文字直到超過父親容器的寬度就換行。


如果你設定了寬度，那麼超過寬度的部分就會換行，一直換行到所有文字都呈現完畢為止。


如果你再設定了高度，那麼超過寬度換行下來，超過高度之後，還是都有顯示，並不會截斷。


所以我們知道單純的高度設定，是控制不了文字的。


我們先把高度去掉，我們只設定寬度，然後加上一個white-space: nowrap;這樣會怎樣呢？你會看到畫面上只顯示一行文字，而且一直往右，超過父親容器（比方body）的話，父親會出現捲軸（除非父親有設定不要捲軸）。


接著，我們再加上overflow:hidden;你會發現，超過寬度的部分，被截斷了，終於不會把所有文字都呈現了。


再來，我們再加上text-overflow:ellipsis;之後，會發現，被截斷的文字，顯示方式是在最後會出現「 ... 」三個逗號當結尾，可以讓使用者知道這文字沒有全部顯示，這應該是比較適當、常用的一種用法。
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;

最後我在跟各位分享一種組合，但是，我個人覺得不好看


設定寬度、設定高度、設定overflow:hidden;這樣就可以讓文字鎖定在範圍內，但是，此時text-overflow:ellipsis;無法作用，就會讓使用者看到被截斷的文字，不是很好看。