您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用CSS解決文本溢出問題的相關知識,內容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇如何使用CSS解決文本溢出問題文章都會有所收獲,下面我們一起來看看吧。
CSS
創建省略號后面的CSS非常簡單,包括寬度,包裝,溢出和文本溢出:
.dataTabletd{
/*essential*/
text-overflow:ellipsis;
width:200px;
white-space:nowrap;
overflow:hidden;
/*外觀漂亮*/
padding:10px;
}
設置寬度提供明顯的邊界,白色空間阻止正常的下一行換行,隱藏溢出確保寬度維度得到遵守,文本溢出設置提供省略號。太棒了吧?但是有一個問題......
Firefox和省略號
不幸的是,Firefox目前不支持文本溢出:省略號。DojoToolkit為Firefox提供了一個簡單的解決方案:dojox.html.ellipsis。此資源使用iFrame填充程序來創建省略號。以下是如何使用它:
//需要資源dojo。require(“dojox.html.ellipsis”);
在需要JavaScript資源之后,是時候dojoxEllipsis在頁面中放置一個節點,表明dojox.html.ellipsis資源應該對它進行橢圓化:
<divclass=“dojoxEllpsis”>Pellentesque居住者morbitristiquesenectusetnetusetmalesuada...</div>
dojoxEllipsis每次修改DOM樹時,Dojo都會在頁面中搜索具有CSS類的元素并對其進行橢圓化處理。
為內容實現動態省略號是一種簡單,微妙且有效的方式,可以在受限制的內容中優雅地管理內容。除了Firefox之外,文本溢出:主要瀏覽器供應商支持省略號。Dojo的實現是穩定且有效的,但如果頁面上有許多橢圓化元素,則會降低頁面的速度。快樂的橢圓化!
關于“如何使用CSS解決文本溢出問題”這篇文章的內容就介紹到這里,感謝各位的閱讀!相信大家對“如何使用CSS解決文本溢出問題”知識都有一定的了解,大家如果還想學習更多知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。