為了提高知名度,展示企業(yè)的形象、企業(yè)的實(shí)力,推廣企業(yè)的發(fā)展理念,越來越多企業(yè)做起了自己的網(wǎng)站,通過網(wǎng)站,在互聯(lián)網(wǎng)上達(dá)到營(yíng)銷企業(yè)自身的目的。隨著互聯(lián)網(wǎng)的飛速發(fā)展,企業(yè)越來越多都做起了網(wǎng)站,網(wǎng)站就猶如企業(yè)的一張名片,需要精心設(shè)計(jì)和構(gòu)建的。那么,在設(shè)計(jì)制作網(wǎng)站頁面的時(shí)候,也許會(huì)遇到各種各樣的問題,或大或小,但是總是會(huì)盡可能的去完善這一系列的問題。下面是我在網(wǎng)站項(xiàng)目的制作中遇到的一個(gè)小問題點(diǎn)。如下圖:
當(dāng)標(biāo)題文字是需要超過設(shè)置的行數(shù)就顯示省略號(hào)的時(shí)候,如若是單行省略,用到這三行樣式即可,而且各大的瀏覽器兼容性也很好,只是只支持單行顯示省略。
當(dāng)需要做到多行省略的時(shí)候,就沒有單行省略那么簡(jiǎn)單便捷。下面這種方式可以在不過多要求兼容性的時(shí)候可以用,因?yàn)?webkit-line-clamp不是一個(gè)規(guī)范的屬性,只能兼容webkit內(nèi)核的瀏覽器,兼容性不太好。但是多行顯示省略的效果很不錯(cuò)。
而如下的這種是用css 處理的巧妙的方式,個(gè)人認(rèn)為是挺不錯(cuò)的。兼容性也挺好的,ie瀏覽器也能兼容,而且可以根據(jù)不用分辨率做出省略的調(diào)整,沒有超出范圍也不會(huì)顯示省略號(hào)。顯示省略號(hào)的時(shí)候可能有點(diǎn)不夠美觀,可以設(shè)置.text:after的背景圖做的省略,就這樣就會(huì)好很多了,具體需要的樣式還需調(diào)整一些。
如沒特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來自http://m.oulysa.com/news/5947.html