Home >Web Front-end >HTML Tutorial >Automatic width after wrapping text within the container_html/css_WEB-ITnose
Recently I encountered such a problem,
In a container with a max-width limit, when the internal text is not long enough, the width of the container can automatically adapt, but when the text is long enough to wrap, the width of the container is Cannot automatically adapt.
Can anyone help me look at this problem? The requirement is that the current styles should not be touched, because these styles are public, and finally some overriding styles should be written. Thanks. The extracted code is attached to facilitate direct debugging.
IE cannot see this problem, but standard browsers such as Firefox can see this problem.
<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>
I tried it in IE and Firefox, the result is the same
This is the first time I encountered this problem.
I think it is like this.
If it exceeds max-width, then the width of the container is the width defined by max-width, so it cannot automatically adapt. .
Let’s discuss.
The results under IE and Firefox are different. Since IE8 and below do not recognize max-width, no matter how long the text is, it will only be displayed in one line without branching.
Is there really no other way?
Hold on. . .