CSSオーバーフローと改行に対処する方法-CSSチュートリアル-php.cn

CSSオーバーフローと改行に対処する方法

零下一度

リリース： 2017-05-03 15:48:45

オリジナル

2900 人が閲覧しました

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 サイトの他の関連記事を参照してください。