HTMLのテキストの最終行が不完全に表示される場合の対処方法-htmlチュートリアル-php.cn

HTMLのテキストの最終行が不完全に表示される場合の対処方法

php中世界最好的语言

リリース： 2017-11-25 11:57:12

オリジナル

4920 人が閲覧しました

Web ページで、レイアウト内のテキストコンテンツが DIV を超えているか、半分が不完全に表示されています。では、どうすれば解決できますか?今回はテキストの最終行が不完全に表示されてしまう場合の対処法を紹介します。

div css レイアウトの DIV ボックスのテキストの最後の行の半分が完全に表示されない問題を解決するにはどうすればよいですか?または、テキストコンテンツの最後の行が DIV 境界を超えている場合、およびコンテンツの最後の行の表示と非表示の CSS レイアウトを制御および選択する方法。

テキストの最後の行が DIV 境界を超えています

レイアウトでは、テキストの最後の行または複数行が 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 を超えて表示されます。これは通常、高さの設定エラーです。このボックスの高さは 50 ピクセル、CSS 行の高さは 20 ピクセルの場合、3 行のテキストは 60 ピクセルの高さを占めます。高さは 50px に設定されています。自然な高さは 10px 低くなります。この種のコンテンツのオーバーフローは、より高いバージョンのブラウザーで発生します。

4. 解決策

最後の行の表示が超過する問題には 4 つの解決策があります:

1 つ目の方法は、高さを計算することです。上記では 3 行のコンテンツを入力する必要があり、行の高さは次のように設定されます。 20px の場合、高さは 3 × 20 = 60px (少なくとも 60px 以上) に設定されます。

2 番目に、DIV ボックスにどれだけのコンテンツが含まれているかがわからない場合は、最も簡単で一般的な方法は、DIV の高さ設定をキャンセルして、コンテンツに合わせて DIV を増やすことです。

3 番目に、line-Height の高さを変更します。CSS レイアウトの高さが固定されており、表示コンテンツも固定されており、それを完全に表示したい場合は、CSS line-height の値のみを変更できます。 , 50 を 3 で割った = 16.6 の場合、line-height は

integer16px に設定されます。これにより、コンテンツが固定高さにオーバーフローする問題が解決されます。

4 番目の方法は、ここでは 3 行のコンテンツが表示されているので、1 行を削除するだけでコンテンツが 2 行のみ表示されます。

テキストの最後の行のフォントが半分表示されます

多くのレイアウトで上記の問題に加えて、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: テキストの行数を減らす（ここでは1行減らすだけ）

4-2: 高さを設定して高さを計算する

4-3: 高さを設定しない

4-4: 計算する固定時の高さ line-heightの値を変更する

具体的な方法については、詳しい解決方法については問題事例を参照してください。

これらは、テキストコンテンツが DIV を超えるか、表示の半分が不完全である問題の解決策です。さらに興味深いコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。

CSSエンコーディングを変換する方法