CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明

CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コンテンツの長さが予想を超え、その可能性を考慮できない場合、ページのデザインが崩れる可能性があります。 CSS が常に期待どおりに動作することを保証することはできませんが、少なくともさまざまな種類のコンテンツでテストして、このような事態が発生する可能性を減らすことができます。

この記事では、実際の Web サイトのさまざまな UI の問題を調査し、これらの Web サイトが壊れる可能性がある理由を説明します。準備はできたか？かかって来い！

右側/左側に小さなアイコンがあるボタン

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

解決策の 1 つは、アイコンのサイズに合わせて右側に十分なパディングを追加することです。

。ボタン {
  右パディング: 50px;
}

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

入力プレースホルダー

フォーラムでフローティング コールアウト モードを使用する場合、特にボタンが右側にある場合は、プレースホルダーが長すぎることによる問題を回避するために十分なテストを実施する必要があります。

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

長い名前

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

ここでの問題は、画像を左にフロートしただけで、著者名が画像の隣に移動することですが、これは著者名が短い場合にのみうまく機能します。

ページレイアウトをより適応性の高いものにするには、両方の要素の幅を広げる必要があります。より推奨されるアプローチは、このような小さなコンポーネントに適した flexbox を使用することです。

記事に長いリンクや単語が含まれている

記事には非常に長いハイパーリンクや単語が含まれている場合があり、ビューポートが広いと問題が発生しないことがあります。しかし、携帯電話やタブレットなどの小型デバイスでは、煩わしい水平スクロール バーが表示される可能性があります。

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

1) CSSの単語区切りを使用する

.記事本文 p {
  単語区切り: 全区切り;
}

word-break プロパティはブラウザによって動作が異なるため、使用時には十分にテストする必要があります。

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

.記事本文 p {
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
}

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

記事タグが長すぎる

カードに記事ラベルを配置する場合、パディングを設定するだけでサイズを決めるのが理想的です。ラベルの内容が長すぎる場合、高さと幅をハードコーディングするとレイアウトが崩れる可能性があります。

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

パーマリンク付きのセクションヘッダー

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

タイトルが長すぎると、問題が発生する可能性があります。より良い解決策は、十分なスペースがない場合にリンクを自動的に次の行に圧縮するフレックスボックス レイアウトを使用することです。

.ヘッダー-2 {
  ディスプレイ: フレックス;
  flex-wrap: ラップ;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
}

上記の技術は「整列モバイルパーセル」と呼ばれます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。