CSSのコンテンツが長すぎる問題を解決する方法

CSS を書いているとき、デザインの重要な状況を忘れているはずです。たとえば、コンテンツの長さが予想を超え、その可能性を説明できない場合、ページのデザインは崩れる可能性が高くなります。 CSS が常に期待どおりに機能することを保証することはできませんが、少なくとも、この問題が発生する可能性を減らすために、さまざまなタイプのコンテンツで CSS をテストすることはできます。

具体的な状況は次のとおりです。

右側/左側に小さなアイコンが付いたボタン

これは、スイッチ ボタンです。アコーディオンエフェクト。ボタンの右側には、クリック可能であることを強調する小さなアイコンがあります。ただし、ボタン領域の長さが十分でない場合、ボタン上のテキストがアイコンを覆ってしまいます。これは、長いコンテンツを考慮していない場合に発生する可能性があります。

アイコンのサイズに合わせて右側に十分なパディング値を追加できます

.button {
  padding-right: 50px;
}

アイコンの安全な表示領域を作成するためにパディング値を増やした方法に注目してください。ボタンのレイアウトが壊れていないことを確認できます。

(推奨される関連チュートリアル: CSS チュートリアル)

プレースホルダーを入力してください

フォーラム モードでフローティング アノテーションを使用する場合、特にボタンが右側にある場合、長すぎるプレースホルダーによって引き起こされる問題を回避するために十分なテストが必要です。

1 つの解決策は、ボタンに相対的な位置を追加することです。これにより、ボタンがプレースホルダーを覆うようになります。

長い名前

このデザインでは、画像が左側に浮かび上がり、右側に作成者の名前に関する情報が表示されます。右側の情報の長さが長すぎる場合はどうなりますか?レイアウトが崩れることは間違いありません。

ここでの問題は、画像を左側にフローティングしただけで、作成者の名前がその隣に移動することですが、これは作成者の名前の長さが短い場合にのみ適切に機能します。

ページ レイアウトの適応性を高めるには、両方の要素の幅を増やす必要があります。より推奨される方法は、このような小さなコンポーネントに適したフレックスボックスを使用することです。

記事内に長いリンク/単語があります

記事には非常に長いハイパーリンクや単語が含まれている場合があり、ウィンドウが非常に広い場合には表示されず、問題が発生することがあります。 。ただし、携帯電話やタブレットなどの一部の小型デバイスでは、迷惑な水平スクロール バーが作成される可能性があります。

この問題には 2 つの解決策があります:

(1) CSS word-break

.article-body p {
  word-break: break-all;
}

word-break プロパティを使用すると、別のブラウザではうまく動作しません。使用する場合は十分にテストする必要があります。

(2) 外側の要素にオーバーフローとテキスト オーバーフローを追加する

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

このソリューションは長いリンクに適しています。長い単語の場合は、ワード ブレークを使用することをお勧めします。

記事タグが長すぎます

記事タグをカードに配置するときは、パディングの設定のみでサイズを決定することをお勧めします。ラベルの内容が長すぎる場合、高さと幅をプログラムするとレイアウトが崩れる可能性があります。

ラベルの最小幅を設定することもできます。パディングで囲まれたラベル コンテンツ要素に min-width 属性を使用すると、幅が動的に変更され、問題は解決されます。

固定リンクのある段落ヘッダー

この例には、段落ヘッダーの右側に「さらに表示」リンクがあります。 CSS を記述する方法はいくつかありますが、その 1 つはリンクに絶対位置を使用することです。

タイトルが長すぎると、問題が発生する可能性があります。十分なスペースがない場合、リンクが自動的に次の行に押し込まれるように、フレックスボックス レイアウトを使用することをお勧めします。

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

上記の手法は、「Alignment Move Package」と呼ばれます。

推奨ビデオ チュートリアル: css ビデオ チュートリアル

以上がCSSのコンテンツが長すぎる問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。