文字溢出與自動換行登入

文字溢出與自動換行

text-overflow用來設定是否使用一個省略標記(...)標示物件內文字的溢出。

語法:

QQ截图20161014170051.png


#但是text-overflow只是用來說明文字溢出時用什麼方式顯示,要實現溢出時產生省略號的效果,也須定義強製文字在一行內顯示(white-space:nowrap)及溢出內容為隱藏(overflow:hidden),只有這樣才能實現溢出文字顯示省略號的效果,程式碼如下:

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

同時,word-wrap也可以用來設定文字行為,當前行超過指定容器的邊界時是否斷開轉行。

語法:

QQ截图20161014170100.png


#normal為瀏覽器預設值,break-word設定在長字或 URL位址內部進行換行,此屬性不常用,用瀏覽器預設值即可。


下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-overflow</title> <style type="text/css"> .test_demo{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc; } </style> </head> <body> <div class="test_demo"> 超酷的IT技术学习平台(我是省略号) </div> </body> </html>
章節課件