ホームページ >ウェブフロントエンド >htmlチュートリアル >テキストをcontainer_html/css_WEB-ITnose内で折り返した後の自動幅

テキストをcontainer_html/css_WEB-ITnose内で折り返した後の自動幅

WBOY
WBOYオリジナル
2016-06-24 12:11:261009ブラウズ

最近そのような問題に遭遇しました。
最大幅制限のあるコンテナでは、内部テキストの長さが十分でない場合、コンテナの幅は自動的に調整されますが、テキストが長すぎて折り返せない場合、コンテナの幅はコンテナは自動的に適応できません。
この問題を解決するのを手伝ってくれる人はいますか? 要件は、現在のスタイルは公開されているため、変更しないこと、そして最後にいくつかのオーバーライド スタイルを記述する必要があることです。ありがとう。抽出されたコードは、直接デバッグを容易にするために添付されています。

この問題は 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> &agrave; 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> &agrave; ce prix		</a>	</div></div>


ディスカッションに返信(解決策)

IEとFirefoxで試しましたが、結果は同じでした

この問題に遭遇したのは初めてです
このようなものだと思います、
max -width を超える場合、コンテナの幅は max-width で定義された幅になるため、自動的に適応できません。


話し合いましょう。

IE と Firefox では結果が異なります。IE8 以下では max-width を認識しないため、文字がどんなに長くても分岐せず 1 行で表示されます。

本当に他に方法はないのでしょうか?

応援してください。 。 。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。