【CSS3】将截断的文字可选的显示出来
生活随笔
收集整理的這篇文章主要介紹了
【CSS3】将截断的文字可选的显示出来
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一.原版本
原版本在文字溢出的時(shí)候只做簡(jiǎn)單的裁剪或者加上截?cái)喾?hào)，但被截?cái)嗟奈淖志筒豢刹榱恕?/p>
CSS選擇器
div {border:1px solid #000000;height: 80px;width: 200px; }HTML標(biāo)簽
<!--當(dāng)文字溢出的時(shí)候只做簡(jiǎn)單的裁剪--> <div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">overflow:hidden;white-space:nowrap;text-overflow:clip; </div> <!--當(dāng)文字溢出的時(shí)候裁剪之后顯示裁剪標(biāo)記--> <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">overflow:hidden;white-space:nowrap;text-overflow:ellipsis; </div>效果CUT
完整鏈接
Link
二.升級(jí)版
升級(jí)的部分就是既能做到截?cái)嘁绯龅牟糠?#xff0c;還能在鼠標(biāo)指針移到截?cái)嗵幍臅r(shí)候?qū)⒈唤氐舻牟糠衷诜秶怙@示出來(lái)。
網(wǎng)頁(yè)源碼
<!DOCTYPE html> <html><meta http-equiv="content-type" content="text/html" ;charset="utf-8"><title>文字溢出問(wèn)題</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>演示說(shuō)明
頁(yè)面一開(kāi)始是這樣的：
可見(jiàn)，溢出的部分就被截?cái)嗔恕?/p>
我們把鼠標(biāo)移到二者的末尾處：
溢出的文字在范圍外顯示出來(lái)了，這就是我們需要的效果。
總結(jié)
以上是生活随笔為你收集整理的【CSS3】将截断的文字可选的显示出来的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【Java】不正当使用break语句的危
- 下一篇： 【CSS3】填色表格演示hsl()