- 1PS提示：因?yàn)閳D層已鎖定，無法編輯圖層的處理方法
- 2Adobe Illustrator CS5 序列號大全
- 3picacg蘋果版怎么找不到|picacg ios版是不是下架了介紹
- 4ACDsee注冊碼免費(fèi)分享（含ACDsee18、ACDsee10等版本）
- 5蘋果iphone自動(dòng)時(shí)間不準(zhǔn)確的多種校正方法
- 6PDF瀏覽器能看3D文件嗎？PDF瀏覽器看3D文件圖文詳細(xì)教程
- 7眼萌app怎么色弱測試 眼萌app色弱測試圖文說明教程
- 8百度安全衛(wèi)士好用么_百度安全衛(wèi)士技巧說明
- 9Potato(馬鈴薯聊天)怎么注冊不了|Potato不能注冊處理方法介紹
- 10Potato(土豆聊天)怎么換頭像|Potato app更改頭像方法介紹
- 11ipad版office如何激活? office365激活的圖文說明教程
- 12最新的Adobe Illustrator CS4序列號大全
聊天工具辦公軟件殺毒教程系統(tǒng)工具圖形圖像電腦學(xué)習(xí)應(yīng)用軟件網(wǎng)絡(luò)軟件蘋果應(yīng)用注冊碼網(wǎng)站教程技術(shù)開發(fā)安卓教程其它教程
您當(dāng)前所在位置：網(wǎng)視手游站 -> 網(wǎng)站教程 -> HTML里的最后一行文字顯示不全怎么處理
HTML里的最后一行文字顯示不全怎么處理
發(fā)表時(shí)間：2024-05-11 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]在我們的網(wǎng)頁里，布局中文字內(nèi)容超出DIV或顯示一半顯示不全，那么我們要怎么進(jìn)行解決呢？今天就給大家點(diǎn)來最后一行文字顯示不全的處理方法。div css布局中DIV盒子里的最后一排文字字體顯示一半顯示不全如何進(jìn)行解決？或者最后一排文字內(nèi)容超出DIV邊框，最后一排內(nèi)容顯示與隱藏如何控制和取舍的CSS布局...
在我們的網(wǎng)頁里，布局中文字內(nèi)容超出DIV或顯示一半顯示不全，那么我們要怎么進(jìn)行解決呢？今天就給大家點(diǎn)來最后一行文字顯示不全的處理方法。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 class="div">
最后一排文字顯示不完<br />
最后一排文字顯示一半測試<br />
DIVCSS實(shí)例測試
</div>
</body>
</html>css布局最后一排文字超出DIV邊框顯示
最后一排文字超出DIV邊框顯示
原因
以上文字字體內(nèi)容顯示超出DIV典型是高度設(shè)置錯(cuò)誤，此盒子高度為50px，css行高為20px,那么三排文字就會(huì)占用60px的高度，而高度卻設(shè)置為50px，自然高度少了10px，在高版本瀏覽器中就會(huì)出現(xiàn)這種內(nèi)容溢出現(xiàn)象。
4、解決方法
解決最后一排顯示超出問題有四種解決方法：
第一種，將高度計(jì)算好，以上要排版三排內(nèi)容，而line-height設(shè)置為20px，那么高度就設(shè)置為3乘以20=60px（最少等于或大于60px）。
第二種，去掉高度height樣式，如果不確定DIV盒子里裝多少內(nèi)容，最簡單方法也是通用方法就是取消對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í)候布局中除了以上問題，超出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 class="div">
最后一排文字顯示不完<br />
最后一排文字顯示一半測試<br />
DIVCSS實(shí)例測試
</div>
</body>
</html>css布局文字顯示不全原因分析
以上案例與第一個(gè)溢出DIV盒子代碼相同，只不過多了overflow:hidden樣式。此“overflow:hidden”樣式具有隱藏DIV超出的內(nèi)容，因此最后一排文字出現(xiàn)顯示不全或只顯示一半。
解決方法
解決方法可以參考上一個(gè)css兼容問題“最后一排文字超出DIV邊框”得到很好解決。
4-1：減少文字行數(shù)（這里減少一行即可）
4-2：設(shè)置高度，高度計(jì)算好
4-3：不設(shè)置高度
4-4：高度固定情況下，計(jì)算修改line-height的值
具體方法看問題案例一詳細(xì)解決方法。
文字內(nèi)容超出DIV或顯示一半顯示不全的解決方法就是這些了，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
標(biāo)簽：HTML里的最后一行文字顯示不全怎樣處理
推薦資訊 總?cè)藲獍?/span>
最新教程 本月人氣
- 1DOTA2玩家最愛的變聲軟件MorphVOX Pro在什么地方里下載？
- 2（視頻）YY上如何男變女聲？VCS變聲器使用方法
- 3BT盒子種子搜索神器經(jīng)常見使用問題與回答
- 4BT盒子種子搜索神器搜索BT種子失敗的處理方法
- 5BT盒子種子搜索神器安卓手機(jī)版默認(rèn)播放器如何設(shè)置？
- 6地下城與勇士DNF直播視頻如何錄制？錄酷來幫你！
- 7用錄酷錄制英雄聯(lián)盟LOL的直播視頻的圖文說明教程
- 8迅雷影音將電視劇片段轉(zhuǎn)換成GIF動(dòng)態(tài)圖的容易方法
- 9電子相冊制作軟件數(shù)碼大師中如何添加視頻？
- 10觀看錄酷錄制的直播視頻時(shí)突然中斷的處理方法
- 11為什么QQ影音無法看游戲直播？
- 12可以看視頻直播的播放器軟件有哪一些？
- 117app如何注冊 17app注冊方法流程
- 2Cool Edit提示：resample.xfm文件失去怎么辦？
- 3HTML 框架如何使用
- 4用H5制作煙花粒子特效的制作方法
- 5KMPlayer播放技巧攻略！播放更順通
- 62016年8月16日優(yōu)酷會(huì)員賬號免費(fèi)分享
- 7騰訊視頻會(huì)員賬號與密碼共享（2016年10月9日）
- 8愛奇藝會(huì)員賬號共享（2016.10.9）
- 9天天看播放器閃退處理圖文說明教程
- 10斗魚TV怎么錄制直播視頻？斗魚TV直播視頻錄制方法
- 11怎么下載酷狗音樂的收費(fèi)歌曲？酷狗收費(fèi)音樂下載圖文說明教程_酷狗音樂_下載之家
- 12愛奇藝泡泡圈怎么退出？退出愛奇藝泡泡圈的方法
