コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

零下一度
リリース： 2017-05-03 15:48:45
オリジナル
2912 人が閲覧しました

1. オーバーフロー処理

1、空白の処理

テキストが長すぎてコンテナに表示できない場合、折り返すかどうか

プロパティ: white-space:normal / nowrap

通常: ブラウザのデフォルト設定を使用します

’ s ’ s

この属性の使用を検討してください。与 注: この属性は次でなければなりません。Overflow: Hidden

属性

: text -Overflow

: 1、Clip

、オフ、ブロックウエストカットオフhith

、ラインブレイク

  1. 注：英語の有効な
1

のみ、長い単語ラインラッピング

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

関連ラベル：
css，溢出，换行
ソース：php.cn
前の記事：サイト全体を灰色にする CSS 特殊効果コードを共有する 次の記事：CSSでの表示方法を教えてください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
CSS 行クラスにより、一部の要素がフレーム外になりますが、要素は静的で表示の下部に固定される必要があります。 現在の私のページはこんな感じです。 2 つの要素が隣り合うように行クラスを追加すると、下部のナビゲーション バーがスクロールする必要がある位置まで押し下げられます。ここでは、行要素...
から 2024-04-03 18:48:12
0
1
281
マウスオーバーイベントを使用してフライアウトメニューを表示する ポップアップ メニューがあり、マウスオーバー イベントを使用して切り替えようとしていますが、期待どおりに動作していないようです。 div を .hero-list-blocka:h...
から 2024-04-03 15:14:43
0
1
416
div を使用せずに複数のスパンクラスを同じ行に置くことは可能ですか? 各テキストに異なる色を付けたかったので、複数のスパンクラスを使用して CSS で色を設定しました。また、テキストに改行を入れたかったので、div を使用しました。このフィドルは私が...
から 2024-04-03 11:17:18
0
1
360
2 つの条件 (「x」文字以内、カンマまたはピリオドで終わる) が満たされた後に改行を追加します。 私は小さなプロジェクトに取り組んでいます。このプロジェクトの目標は、書式設定 (二重スペース、数字、改行) を取り除き、「x」文字ごとに改行して値を出力することですが、必ずカンマま...
から 2024-04-03 09:17:09
0
1
283
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート