HTML里的最后一行文字顯示不全怎么處理

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 15:27:39

HTML里的最后一行文字顯示不全怎么處理

HTML里的最后一行文字顯示不全怎么處理:在我們的網(wǎng)頁里，布局中文字內容超出DIV或顯示一半顯示不全，那么我們要怎么進行解決呢？今天就給大家點來最后一行文字顯示不全的處理方法。div css布局中DIV盒子里的最后一排文字字體顯示一半顯示不全如何進行解決？或者最后一排文字內容超出DIV邊框，最后

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML里的最后一行文字顯示不全怎么處理:在我們的網(wǎng)頁里，布局中文字內容超出DIV或顯示一半顯示不全，那么我們要怎么進行解決呢？今天就給大家點來最后一行文字顯示不全的處理方法。div css布局中DIV盒子里的最后一排文字字體顯示一半顯示不全如何進行解決？或者最后一排文字內容超出DIV邊框，最后

在我們的網(wǎng)頁里，布局中文字內容超出DIV或顯示一半顯示不全，那么我們要怎么進行解決呢？今天就給大家點來最后一行文字顯示不全的處理方法。

div css布局中DIV盒子里的最后一排文字字體顯示一半顯示不全如何進行解決？或者最后一排文字內容超出DIV邊框，最后一排內容顯示與隱藏如何控制和取舍的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實例測試 
</div> 
</body> 
</html>

css布局最后一排文字超出DIV邊框顯示

最后一排文字超出DIV邊框顯示

原因

以上文字字體內容顯示超出DIV典型是高度設置錯誤，此盒子高度為50px，css行高為20px,那么三排文字就會占用60px的高度，而高度卻設置為50px，自然高度少了10px，在高版本瀏覽器中就會出現(xiàn)這種內容溢出現(xiàn)象。

4、解決方法

解決最后一排顯示超出問題有四種解決方法：

第一種，將高度計算好，以上要排版三排內容，而line-height設置為20px，那么高度就設置為3乘以20=60px（最少等于或大于60px）。

第二種，去掉高度height樣式，如果不確定DIV盒子里裝多少內容，最簡單方法也是通用方法就是取消對DIV高度設置，這樣DIV就會隨內容多少增高

第三種，修改line-height高度，如果你CSS布局中高度固定，并且顯示內容也固定并想顯示完整，就只有修改css line-height的值，這個案例50除以3=16.6，那么line-height設置整數(shù)16px即可解決內容溢出固定高度。

第四種，減少內容，這里顯示的是三排內容，你只需要去掉一排，讓內容只顯示兩排即可解決。

最后一排文字字體顯示一半

很多時候布局中除了以上問題，超出DIV的內容并不溢出而是隱藏不顯示，如何解決？

1、HTML+CSS實例代碼

<!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實例測試 
</div> 
</body> 
</html>

css布局文字顯示不全原因分析

以上案例與第一個溢出DIV盒子代碼相同，只不過多了overflow:hidden樣式。此“overflow:hidden”樣式具有隱藏DIV超出的內容，因此最后一排文字出現(xiàn)顯示不全或只顯示一半。

解決方法

解決方法可以參考上一個css兼容問題“最后一排文字超出DIV邊框”得到很好解決。

4-1：減少文字行數(shù)（這里減少一行即可）

4-2：設置高度，高度計算好

4-3：不設置高度

4-4：高度固定情況下，計算修改line-height的值

具體方法看問題案例一詳細解決方法。

文字內容超出DIV或顯示一半顯示不全的解決方法就是這些了，更多精彩請關注Gxl網(wǎng)其它相關文章！