- 締切済み
ulインラインブロックの文字数オーバーの非表示
<html> <body> <head> <style> li { float: left; width: 100px; font-size: 13px; text-align: center; padding: 4px; background: #ccc; margin-right: 10px; margin-bottom: 10px; border-radius: 4px; text-shadow: 0 1px 0 #fff; } </style> </head> <ul> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンクグーグルへリンクグーグルへリンク</A></li> <li><A href="http://www.google.co.jp" TARGET="_blank">グーグルへリンク</A></li> </ul> </body> </html> ULブロック要素をスタイルシートでインラインブロック要素にして、 横に並べたて表示しているのですが、表のように表示した時に、 そのliの一つ一つのブロックから文字がはみ出すことがあります。 overflow:hidden;を設定しても文字数の数だけ、liブロックを拡大して表示されてしまうのですが、 どのように表記すれば、うまくいくでしょうか？よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- tkmojo
- ベストアンサー率50% (105/207)
> liタグの中に沢山文字を書くと > liの項目が下に大きく膨らむ？というのを防ぎたかったのですが、 文字量が多いと縦に伸びるのはWEBの仕様として当然です。 2の回答者の方が言うように、heightの指定とoverflow:hidden;をliに入れれば高さは揃います。 ですが、せっかく沢山書いた文字は当然途中から表示されなくなるので本末転倒でしょう。 「一番縦が長いliに合わせて他のliの高さを揃える」という方法なら、jQueryで可能です。 このあたりを利用すれば実現できます。 http://liginc.co.jp/web/js/jquery/22340
- DrFell
- ベストアンサー率55% (305/551)
cssに overflow:hidden; height:1em;/*縦方向の制限の高さ。好きな数値に変えてください*/ を加えてはどうでしょうか？
お礼
回答ありがとうございます。 参考にさせて頂きます。
- tkmojo
- ベストアンサー率50% (105/207)
> ULブロック要素をスタイルシートでインラインブロック要素にして、 > 横に並べたて表示しているのですが cssを見たところ、ulには何の指定も無く、横並びになっているのはulではなくliですし、display:inline-block;ではなくfloatで横並びを実現させていますし、liから文字がはみ出してもいません。 質問の文章とコードが何一つ一致しておらず、 どういうレイアウトを求めいているのかが質問からは全くわかりません。 ulのcssも記載した上で、最終的にどうしたくて現状の何が不満なのかを記載しないと回答は得られないと思いますよ。
お礼
liタグの中に沢山文字を書くと liの項目が下に大きく膨らむ？というのを防ぎたかったのですが、 今後、質問する際は気を付けようと思います。 回答ありがとうございました。
お礼
参考にさせていただきます。 回答ありがとうございました。