ホームページ >ウェブフロントエンド >htmlチュートリアル >テキストをcontainer_html/css_WEB-ITnose内で折り返した後の自動幅
最近そのような問題に遭遇しました。
最大幅制限のあるコンテナでは、内部テキストの長さが十分でない場合、コンテナの幅は自動的に調整されますが、テキストが長すぎて折り返せない場合、コンテナの幅はコンテナは自動的に適応できません。
この問題を解決するのを手伝ってくれる人はいますか? 要件は、現在のスタイルは公開されているため、変更しないこと、そして最後にいくつかのオーバーライド スタイルを記述する必要があることです。ありがとう。抽出されたコードは、直接デバッグを容易にするために添付されています。
この問題は IE では発生しませんが、Firefox などの標準ブラウザでは発生します。
<style>.large-thumbnail {width:590px;font-family:Arial, Helvetica, sans-serif;font-size:12px;}.notices { float: right; padding: 0 8px 32px 0; text-align: right; width: 120px;}.large-thumbnail .notices { margin-right: -1px; margin-top: -2px; padding-bottom: 0; width: auto;}.notices.urgency .skinny-urgency{ -moz-border-radius: 2px 0 0 2px; background-color: #339900; border: thin solid #BCBCBC; color: #FFFFFF; padding: 6px;}.msg-bubble { color: #000000; display: inline-block; font-size: 11px; max-width: 164px; position: relative; text-decoration: none;}</style><!-- 分行div --><div class="large-thumbnail"> <div class="notices urgency"> <a class="msg-bubble skinny-urgency"> <strong>Seulement 2 chambres restantes</strong><br> à ce prix </a> </div></div><br style="clear:both;"/><br style="clear:both;"/><br style="clear:both;"/><!-- 不分行div --><div class="large-thumbnail"> <div class="notices urgency"> <a class="msg-bubble skinny-urgency right-center"> <strong>Seulement 2 cham</strong><br> à ce prix </a> </div></div>
IEとFirefoxで試しましたが、結果は同じでした
この問題に遭遇したのは初めてです
このようなものだと思います、
max -width を超える場合、コンテナの幅は max-width で定義された幅になるため、自動的に適応できません。
話し合いましょう。
IE と Firefox では結果が異なります。IE8 以下では max-width を認識しないため、文字がどんなに長くても分岐せず 1 行で表示されます。
本当に他に方法はないのでしょうか?
応援してください。 。 。