這篇文章主要介紹了css中的text-overflow屬性怎么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創新互聯建站網站建設公司,提供做網站、網站設計,網頁設計,建網站,PHP網站建設等專業做網站服務;可快速的進行網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,是專業的做網站團隊,希望更多企業前來合作!
CSS3text-overflow屬性
作用:text-overflow屬性規定當文本溢出包含元素時發生的事情。
語法:
text-overflow:clip|ellipsis|string;
clip:修剪文本。
ellipsis:顯示省略符號來代表被修剪的文本。
string:使用給定的字符串來代表被修剪的文本。
注:所有主流瀏覽器都支持text-overflow屬性。
CSS3text-overflow屬性的使用示例
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<style>
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1pxsolid#000000;
}
div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
</style>
</head>
<body>
<p>將鼠標移動到框內,查看效果.</p>
<divclass="test"style="text-overflow:ellipsis;">Thisissomelongtextthatwillnotfitinthebox</div>
<br>
<divclass="test"style="text-overflow:clip;">Thisissomelongtextthatwillnotfitinthebox</div>
</body>
</html>
感謝你能夠認真閱讀完這篇文章,希望小編分享的“css中的text-overflow屬性怎么用”這篇文章對大家有幫助,同時也希望大家多多支持創新互聯,關注創新互聯行業資訊頻道,更多相關知識等著你來學習!
標題名稱:css中的text-overflow屬性怎么用
鏈接分享:http://vcdvsql.cn/article48/pccoep.html
成都網站建設公司_創新互聯,為您提供網站策劃、手機網站建設、靜態網站、用戶體驗、網頁設計公司、網站制作
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯