div css布局中DIV盒子里的最后一排文字字體顯示一半顯示不全如何進(jìn)行解決？或者最后一排文字內(nèi)容超出DIV邊框，最后一排內(nèi)容顯示與隱藏如何控制和取舍的CSS布局。

最后一排文字超出DIV邊框

在布局中常常出現(xiàn)最后1排或多排文字超出DIV邊框顯示。

1、HTML完整源代碼如下：

 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title 顯示不全或超出 /title  style .div{ border:1px solid #000; width:200px; height:50px;line-height:20px}  /style  /head  body  div >
css布局最后一排文字超出DIV邊框顯示
最后一排文字超出DIV邊框顯示
原因
以上文字字體內(nèi)容顯示超出DIV典型是高度設(shè)置錯(cuò)誤，此盒子高度為50px，css行高為20px,那么三排文字就會(huì)占用60px的高度，而高度卻設(shè)置為50px，自然高度少了10px，在高版本瀏覽器中就會(huì)出現(xiàn)這種內(nèi)容溢出現(xiàn)象。
4、解決方法
解決最后一排顯示超出問(wèn)題有四種解決方法：
第一種，將高度計(jì)算好，以上要排版三排內(nèi)容，而line-height設(shè)置為20px，那么高度就設(shè)置為3乘以20=60px（最少等于或大于60px）。
第二種，去掉高度height樣式，如果不確定DIV盒子里裝多少內(nèi)容，最簡(jiǎn)單方法也是通用方法就是取消對(duì)DIV高度設(shè)置，這樣DIV就會(huì)隨內(nèi)容多少增高
第三種，修改line-height高度，如果你CSS布局中高度固定，并且顯示內(nèi)容也固定并想顯示完整，就只有修改css line-height的值，這個(gè)案例50除以3=16.6，那么line-height設(shè)置整數(shù)16px即可解決內(nèi)容溢出固定高度。
第四種，減少內(nèi)容，這里顯示的是三排內(nèi)容，你只需要去掉一排，讓內(nèi)容只顯示兩排即可解決。
最后一排文字字體顯示一半 
很多時(shí)候布局中除了以上問(wèn)題，超出DIV的內(nèi)容并不溢出而是隱藏不顯示，如何解決？
1、HTML+CSS實(shí)例代碼
 !DOCTYPE html  html  head  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  title 顯示不全或超出 /title  style .div{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px}  /style  /head  body  div >
css布局文字顯示不全原因分析
以上案例與第一個(gè)溢出DIV盒子代碼相同，只不過(guò)多了overflow:hidden樣式。此“overflow:hidden”樣式具有隱藏DIV超出的內(nèi)容，因此最后一排文字出現(xiàn)顯示不全或只顯示一半。
解決方法
解決方法可以參考上一個(gè)css兼容問(wèn)題“最后一排文字超出DIV邊框”得到很好解決。
4-1：減少文字行數(shù)（這里減少一行即可）
4-2：設(shè)置高度，高度計(jì)算好
4-3：不設(shè)置高度
4-4：高度固定情況下，計(jì)算修改line-height的值
具體方法看問(wèn)題案例一詳細(xì)解決方法。
文字內(nèi)容超出DIV或顯示一半顯示不全的解決方法就是這些了，更多精彩請(qǐng)關(guān)注php 其它相關(guān)文章！
相關(guān)閱讀：
CSS的編碼怎么轉(zhuǎn)換
CSS3怎么制作蝴蝶飛舞的動(dòng)畫
怎樣用canvas做出粒子噴泉?jiǎng)赢嫷男Ч?p>以上就是HTML里的最后一行文字顯示不全怎么處理的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。