WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-12. CSS 範例再練習 (依需求挑選學習)

CSS3 有關文字內容

版本 屬性 說 明
3 word-break 設計單詞中可否斷字換行。 參考【英文版】 【簡中版
3 text-overflow 設計文字超出區域時的處理。 參考【英文版】 【簡中版

 

有關文字內容範例已設定好的部份

<div class="b2">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</div>
<div class="b3">12345 12345 12345 12345 12345678901234567890 12345 12345 12345</div>

<style>
.b2, .b3 { width: 350px; margin: 30px auto; padding: 15px; 
           background-color: lightsteelblue; }
</style>

測試斷字換行的設計

zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

測試超出區塊寬度多餘文字隱藏換刪節符號

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

 

 

go TOP