We can set in CSS3 -moz-max-content
(for Firefox) and -webkit-max-content
(for Chrome, Safari) as width
, but it seems -ms-max-content
is not working in Internet Explorer (IE11).
Update: Here is a sample code:
.button {
background: #d1d1d1;
margin: 2px;
cursor: pointer;
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
}
<div>
<div class="button"> Short t. </div>
<div class="button"> Looooooong text </div>
<div class="button"> Medium text </div>
</div>
CSS3 Features Supported by All Modern Browsers.
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 ( \9 ) at the end before the semicolon. IE7 or below: add an asterisk ( * ) before the CSS property. IE6: add an underscore ( _ ) before the property.
This works on IE11, Chrome and Firefox
instead of
width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content;
I used
width: auto; white-space: nowrap;
-max-content
it is not supported by IE, according to CanIuse.
So I created a fallback for IE that might help you, by setting .button
to display:inline-block
:
.button { background: #d1d1d1; margin: 2px; cursor: pointer; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; /* width: -ms-max-content;*/ } /* fallback for IE*/ .button { display: inline-block; }
<div> <div class="button">Short t.</div> <div class="button">Looooooong text</div> <div class="button">Medium text</div> </div>
UPDATE: (Based on OP comment)
It's working, but I don't want to display the elements inline.
here is the final answer:
.button { background: #d1d1d1; margin: 2px; cursor: pointer; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content /* width: -ms-max-content;*/ } /* fallback for IE*/ .width { width:100% } .button { display: inline-block; }
<div> <div class="width"> <div class="button">Short t.</div> </div> <div class="width"> <div class="button">Looooooong text</div> </div> <div class="width"> <div class="button">Medium text</div> </div> </div>
Nowadays and for awhile there is a cleaner approach to this issue, by simply setting the parent as display: flex
, and you even won't need the *-max-content
value in width
property
.button { background: #d1d1d1; margin: 2px; cursor: pointer; } /* the fix */ section { display: flex }
<section> <div class="button">Short t.</div> <div class="button">Looooooong text</div> <div class="button">Medium text</div> </section>
For text elements I tried word-break: keep-all;
and it worked for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With