Tailwind で「overflow-hidden」と「overflow-visible」を使用する方法は?

コンテナに追加して、オーバーフロー コンテンツを非表示にします。

< 体 >

< ディビジョン クラス = 「overflow-hidden bg-purple-300 p-4 mx-16 mt-5 h-32 text-justify」 >
Tailwind CSS はさまざまな機能を提供します 'オーバーフロー' ユーティリティなど 「オーバーフロー自動」 、 「オーバーフロースクロール」 、 「オーバーフロー非表示」 、
「オーバーフロー可視」 これらのユーティリティは、特定の要素がどのように処理するかを決定します。 コンテンツ を超えるもの
容器 サイズ 。各ユーティリティは独自の機能を提供しますが、最終目標は同じです。つまり、制御することです。
のオーバーフロー動作 選択された 要素。
< / ディビジョン >

< / 体 >

ここ：

---

---

• 「オーバーフロー非表示」 クラスは、
  コンテナのサイズを超えるコンテンツを非表示にするために使用されます。
• 「BG-パープル-300」 クラスはコンテナの背景に紫色を設定します。
• 「p-4」 クラスは、コンテナーの全側面に 4 単位のパディングを設定します。
• 「MX-16」 クラスは、コンテナーの X 軸に 16 単位のマージンを適用します。
• 「MT-5」 クラスは、コンテナーの上部に 5 単位のマージンを適用します。
• 「h-32」 クラスはコンテナの高さを 32 単位に設定します。
• 「テキストの両端揃え」 クラスは、コンテナ内のコンテンツのテキストを両端揃えにします。

出力

上記の出力では、オーバーフローしたコンテンツは表示されません。これは、「overflow-hidden」プロパティが正常に適用されたことを示しています。

Tailwind で「overflow-visible」を使用するにはどうすればよいですか?

の 「オーバーフロー可視」 クラスを使用すると、超過したコンテンツを表示できるようになります。 Tailwind で「overflow-visible」を利用するには、HTML 構造を作成し、特定の要素を含む「overflow-visible」ユーティリティ クラスを適用します。

構文

<要素 クラス = 「オーバーフローが見える...」 >...< / 要素>

例
この例では、 「オーバーフロー可視」 ユーティリティを