網(wǎng)站的迅速發(fā)展,對用戶交互體驗(yàn)需要也越來越高,web前端開發(fā)者需要考慮更多,怎樣通過前端的控制,讓用戶數(shù)據(jù)更高效的顯示。
要達(dá)到的目標(biāo)是:數(shù)據(jù)過多時(shí),不會(huì)影響頁面布局
解決方法:
1,在不影響布局的情況下,可以選擇,數(shù)據(jù)自動(dòng)換行
a.設(shè)置寬度限制:可以使用width值和max-width大寬度值。
b.內(nèi)容自動(dòng)換行:word-wrap:break-word(中文,英文語句,長串字母都能實(shí)現(xiàn));
注意點(diǎn):長串字母實(shí)現(xiàn)前提,必須將寬度限制直接添加到“文本內(nèi)容的標(biāo)簽”。
2,控制數(shù)據(jù)超出一定范圍,自動(dòng)隱藏——通過title值來顯示全部數(shù)據(jù)信息
a.設(shè)置寬度限制:可以使用width值和max-width大寬度值。
b.超出范圍隱藏:overflow:hidden;
3,控制數(shù)據(jù)超出一定范圍,自動(dòng)隱藏,并顯示省略號…——通過title值來顯示全部數(shù)據(jù)信息
a.數(shù)據(jù)不換行:white-space:nowrap;
b.超出范圍隱藏:overflow:hidden;
c.顯示省略號:text-overflow:ellipsis;
工作中整理出來的方法,可以提高自己的技術(shù)。
突然想起:學(xué)習(xí)知識的過程:
1,首先是學(xué)習(xí)基礎(chǔ)知識的過程
2,其次是反復(fù)實(shí)踐(沒有實(shí)踐,理論再好,也不能說自己學(xué)到了)
3,最后可以將自己所學(xué),總結(jié)出來,分享給大家。(讓想學(xué)的人學(xué)會(huì))
總結(jié)一句話:學(xué)習(xí)是個(gè)長期積累,不斷研究的一個(gè)過程。
自己的語言組織能力,表達(dá)能力很差,但希望自己可以提高。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!
當(dāng)前文章:如何做到不會(huì)影響頁面的布局
當(dāng)前鏈接:http://jinyejixie.com/news9/324309.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、營銷型網(wǎng)站建設(shè)、Google、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)