Home >Web Front-end >HTML Tutorial >Automatic width after wrapping text within the container_html/css_WEB-ITnose

Automatic width after wrapping text within the container_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:11:261003browse

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> &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>


Reply to discussion (solution)

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. . .

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn