【CSS3】将截断的文字可选的显示出来
生活随笔
收集整理的這篇文章主要介紹了
【CSS3】将截断的文字可选的显示出来
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一.原版本
原版本在文字溢出的時候只做簡單的裁剪或者加上截斷符號，但被截斷的文字就不可查了。
CSS選擇器
div {border:1px solid #000000;height: 80px;width: 200px; }HTML標簽
<!--當文字溢出的時候只做簡單的裁剪--> <div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">overflow:hidden;white-space:nowrap;text-overflow:clip; </div> <!--當文字溢出的時候裁剪之后顯示裁剪標記--> <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">overflow:hidden;white-space:nowrap;text-overflow:ellipsis; </div>效果CUT
完整鏈接
Link
二.升級版
升級的部分就是既能做到截斷溢出的部分，還能在鼠標指針移到截斷處的時候將被截掉的部分在范圍外顯示出來。
網頁源碼
<!DOCTYPE html> <html><meta http-equiv="content-type" content="text/html" ;charset="utf-8"><title>文字溢出問題</title><head><style>div.test{white-space:nowrap;width:12em;overflow:hidden;border:1px solid #000000;}div.test:hover{text-overflow:inherit;overflow:visible;}</style></head><body><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in thebox</div><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></body> </html>演示說明
頁面一開始是這樣的：
可見，溢出的部分就被截斷了。
我們把鼠標移到二者的末尾處：
溢出的文字在范圍外顯示出來了，這就是我們需要的效果。
總結
以上是生活随笔為你收集整理的【CSS3】将截断的文字可选的显示出来的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Java】不正当使用break语句的危
- 下一篇： 合理抽象灵活运用排列组合（洛谷P2181