超過寬度顯示省略符號(CSS版)

來源:互聯網
上載者:User

    在逛hemin的部落格的時候看到了一道面試題,關於超過寬度顯示省略符號的效果,自己在網上查查,發現了這個CSS版本。當然還有JS版的解決方案,而且簡單,不過這個的思路很精妙,值得收藏!
    基本原理是:當容器內的常值內容超過容器寬度時,文本將會換行,這時給容器一個overflow:hidden屬性,換行部分將不會顯示。OK!接下來是最精彩的部分。請看代碼:

代碼
.list ul { 
font-size:12px;
font-family:simsun;
text-align:left;
line-height:18px;
width:11em;
background:#fff;
}
.list li{
height:18px;
overflow:hidden; //當a被撐開時只顯示上半部分
position:relative;
padding-left:1em;
background:url(...) no-repeat 3px 6px;
}
.list a{
display:block;
padding-right:1em; //為了容納span
background:url(...) right top no-repeat;
position:relative;
zoom:1;
word-break:break-all;//漢字字母數字
}
.list a span {
position:absolute; //span浮動,
right:0em;
bottom:0; //span緊貼下邊界
height:18px;
width:1em;
background:#fff; //背景色與a一致,遮擋span
overflow:hidden;
}

 

可能光看代碼還是不清楚,再來看看:

 

我相信再是很清楚了。
很巧妙的想法,讓人回味!
此方法出處:http://bbs.blueidea.com/thread-2915238-1-1.html

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.