html - テキストが長い場合、li の下のテキストがめちゃくちゃになる

Question

WordPress用のWooCommerceプラグインを使用してecommerce store. しかし、私の問題は、一部のアイテムのタイトルが 50 ～ 60 文字を超えることです。これにより、製品のレイアウトがめちゃくちゃになります。ここに、レイアウトのスクリーン ショットを添付します。ここで何をすべきか教えてください。ここから入手できるライブサイト。

アップデート

壊れた画面イメージはこちら

Answer 1

さて、あなたには約3つのオプションがあります。

1. 何もせず、それと一緒に暮らす
2. liまたは高さを制限しh3、オーバーフローをスクロール/非表示にします。
3. タイトルを減らす

2 番目は、これを css に追加することです。

div#content ul.products li.product {height:300px; overflow:auto;}

または、代わりにこれを追加することもできます:

div#content ul.products li.product h3 {height:1em;overflow:hidden}

番号 3 は、単純に長いタイトルを持たないことです...ゲーム タイトルを書くときに、文字列の長さが制限
よりも大きいかどうかを調べます。そうであれば、substr のみを出力して "..." を追加します。

考えられる別の解決策が 1 つありますが、それはもう少し複雑です。ゲーム タイトルの長さに応じて、特定のしきい値までテキスト サイズを縮小します。