如何做到不會(huì)影響頁面的布局

網(wǎng)站的迅速發(fā)展，對(duì)用戶交互體驗(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(中文，英文語句，長(zhǎng)串字母都能實(shí)現(xiàn)); 注意點(diǎn)：長(zhǎng)串字母實(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)隱藏，并顯示省略號(hào)…——通過title值來顯示全部數(shù)據(jù)信息 a.數(shù)據(jù)不換行：white-space:nowrap; b.超出范圍隱藏：overflow:hidden; c.顯示省略號(hào)：text-overflow:ellipsis;

工作中整理出來的方法，可以提高自己的技術(shù)。 突然想起：學(xué)習(xí)知識(shí)的過程： 1，首先是學(xué)習(xí)基礎(chǔ)知識(shí)的過程 2，其次是反復(fù)實(shí)踐（沒有實(shí)踐，理論再好，也不能說自己學(xué)到了） 3，最后可以將自己所學(xué)，總結(jié)出來，分享給大家。（讓想學(xué)的人學(xué)會(huì)） 總結(jié)一句話：學(xué)習(xí)是個(gè)長(zhǎng)期積累，不斷研究的一個(gè)過程。

自己的語言組織能力，表達(dá)能力很差，但希望自己可以提高。 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前文章：如何做到不會(huì)影響頁面的布局
當(dāng)前鏈接：http://muchs.cn/news9/324309.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、營(yí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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)