網(wǎng)頁(yè)制作技巧:數(shù)據(jù)過(guò)多時(shí)不會(huì)影響頁(yè)面布局
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
著網(wǎng)站的迅速發(fā)展,對(duì)用戶交互體驗(yàn)需要也越來(lái)越高,web前端開(kāi)發(fā)者需要考慮更多,怎樣通過(guò)前端的控制,讓用戶數(shù)據(jù)更高效的顯示。
要達(dá)到的目標(biāo)是:數(shù)據(jù)過(guò)多時(shí),不會(huì)影響頁(yè)面布局 解決方法: 1,在不影響布局的情況下,可以選擇,數(shù)據(jù)自動(dòng)換行 a.設(shè)置寬度限制:可以使用width值和max-width最大寬度值。 b.內(nèi)容自動(dòng)換行:word-wrap:break-word(中文,英文語(yǔ)句,長(zhǎng)串字母都能實(shí)現(xiàn)); 注意點(diǎn):長(zhǎng)串字母實(shí)現(xiàn)前提,必須將寬度限制直接添加到“文本內(nèi)容的標(biāo)簽”。 2,控制數(shù)據(jù)超出一定范圍,自動(dòng)隱藏——通過(guò)title值來(lái)顯示全部數(shù)據(jù)信息 a.設(shè)置寬度限制:可以使用width值和max-width最大寬度值。 b.超出范圍隱藏:overflow:hidden; 3,控制數(shù)據(jù)超出一定范圍,自動(dòng)隱藏,并顯示省略號(hào)...——通過(guò)title值來(lái)顯示全部數(shù)據(jù)信息 a.數(shù)據(jù)不換行:white-space:nowrap; b.超出范圍隱藏:overflow:hidden; c.顯示省略號(hào):text-overflow:ellipsis; 工作中整理出來(lái)的方法,可以提高自己的技術(shù)。 突然想起:學(xué)習(xí)知識(shí)的過(guò)程: 1,首先是學(xué)習(xí)基礎(chǔ)知識(shí)的過(guò)程 2,其次是反復(fù)實(shí)踐(沒(méi)有實(shí)踐,理論再好,也不能說(shuō)自己學(xué)到了) 3,最后可以將自己所學(xué),總結(jié)出來(lái),分享給大家。(讓想學(xué)的人學(xué)會(huì)) 總結(jié)一句話:學(xué)習(xí)是個(gè)長(zhǎng)期積累,不斷研究的一個(gè)過(guò)程。 自己的語(yǔ)言組織能力,表達(dá)能力很差,但希望自己可以提高。 缺點(diǎn)也很明顯:自己學(xué)到的東西,表達(dá)不出來(lái)。 該文章在 2012/5/7 12:44:23 編輯過(guò) |
關(guān)鍵字查詢(xún)
相關(guān)文章
正在查詢(xún)... |