ホームページ > 記事 > ウェブフロントエンド > CSSオーバーフローと改行に対処する方法
CSSオーバーフローと改行に対処する方法
- 零下一度オリジナル
- 2017-05-03 15:48:452901ブラウズ
1. オーバーフロー処理
1、空白の処理
テキストが長すぎてコンテナに表示できない場合、折り返すかどうか
プロパティ: white-space:normal / nowrap
通常: ブラウザのデフォルト設定を使用します
’ s ’ s
この属性の使用を検討してください。与 注: この属性は次でなければなりません。Overflow: Hidden
属性
: text -Overflow
: 1、Clip
、オフ、ブロックウエストカットオフhith
、ラインブレイク
- 注：英語の有効な
のみ、長い単語ラインラッピング
ラインラッピング-word：destroy単語の構造
単語置換 d 単語ブリーム:値:
通常: ブレークオール:チェンジオールの単語構造を破棄:
<!DOCTYPE html >
<head>
<title>文本格式</title>
<meta charset="utf-8" />
<style>
p{
width:150px;
height:50px;
border:1px solid black;
overflow:hidden;
}
#d1{
white-space:normal;
text-overflow:ellipsis;
}
#d2{
white-space:nowrap;
text-overflow:clip;
}
#d3{
white-space:nowrap;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<p id="d1">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
<p id="d2">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p><br/>
<p id="d3">longlonglonglonglonglonglonglonglonglong无法在框中容纳</p>
</body>
</html>以上がCSSオーバーフローと改行に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。