HTML裡的最後一行文字顯示不全怎麼處理

php中世界最好的语言
發布: 2017-11-25 11:57:12
原創
4897 人瀏覽過

在我們的網頁裡,版面配置文字內容超出DIV或顯示一半顯示不全,那我們要怎麼解決呢?今天就給大家點來最後一行文字顯示不全的處理方法。

div css佈局中DIV盒子裡的最後一排文字字體顯示一半顯示不全如何進行解決?或最後一排文字內容超出DIV邊框,最後一排內容顯示與隱藏如何控制和取捨的CSS佈局。

最後一排文字超出DIV邊框 

在佈局中常出現最後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,在高版本瀏覽器中就會出現這種內容溢位現象。

4、解決方法

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

第一種,將高度計算好,以上要排版三排內容,而line-height設定為20px,那麼高度就設定為3乘以20=60px(最少等於或大於60px)。

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

第三種,修改line-height高度,如果你CSS佈局中高度固定,並且顯示內容也固定並想顯示完整,就只有修改css line-height的值,這個案例50除以3=16.6,那麼line-height設定整數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超出的內容,因此最後一排文字出現顯示不全或只顯示一半。

解決方法

解決方法可以參考上一個css相容問題「最後一排文字超出DIV邊框」得到很好解決。

4-1:減少文字行數(這裡減少一行即可)

4-2:設定高度,高度計算好

4-3:不設定高度

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

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

文字內容超出DIV或顯示一半顯示不全的解決方法就是這些了,更多精彩請關注php中文網其它相關文章!

相關閱讀:

CSS的編碼怎麼轉換

CSS3怎麼製作蝴蝶飛舞的動畫

怎麼用canvas做出粒子噴泉動畫的效果


#

以上是HTML裡的最後一行文字顯示不全怎麼處理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!