標籤：
如果想讓某個容器（div或者li或者...區塊層級元素）顯示一行文字，當文字內容過多時，不換行，而是出現...,可以使用text-overflow:clip|ellipsis基本文法：text-overflow : clip | ellipsis若為text-overflow:clip 取預設值，不顯示省略標記(...)，而是簡單的裁切若為text-overflow:ellipsis 當對象內文本溢出時顯示省略標記(...) 例如：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css">#box{width:100px;background-color:#87CEEB;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} </style> </head> <body> <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div> </body></html>
註：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用
1.一定要給容器定義寬度.
2.如果少了overflow: hidden;文字會橫向撐到容易的外面
3.如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略符號也不會出現，多餘的文字會被裁切掉
4.如果少了text-overflow:ellipsis;多餘的文字會被裁切掉，就相當於你這樣定義text-overflow:clip.
CSS中的text-overflow:clip|ellipsis的使用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
