css - jquery-ui dialog doesn't size correctly when content has white-space wrapping disabled -

<div style="white-space: nowrap;">     text containing spaces wrapped. </div> <script type="text/javascript">     $(function(){         $("div").dialog();     }); </script> 

when dialog opens, size narrow display unwrapped contents.

how can ensure dialog wide enough without setting arbitrary width?

if got right, adding width:auto dialog option enough

$("div").dialog({   width:'auto' }); 

demo: http://codepen.io/8odoros/pen/rlqjjl