css3 - Make div size exactly text width? -


this question has answer here:

i trying keep icon floated left on liquid text container has line breaks.

the problem when line breaks, there large gap before text ends , div ends. makes floated element start gap ends.

is there way make div size of contents?

check codepen: https://jsfiddle.net/e38edtdy/1/ resize output area see gap of space. button auto resize see gap.

*{ padding:0; margin:0; top:0; left:0;   }  #maincontainer{  width:100%;       border:black solid thin; }   #lt{  color: black;  background-color:gray;  tex-align:left;  max-width:90%; float:left;  } #icon{ width:20px; height:20px; background-color:blue; float:left; }  <body  >    <div id='maincontainer'>     <div id='lt'>this information information information</div>     <div id='icon'></div>    </div>   <br/>   <input type='button' onclick='showbadsize()' value="click auto resize show gap" style='margin-top:20px;float:left; clear:left' /> </body> 

an alternative might put hyphens: auto on text container make text break more nicely. firefox needed language attribute well, lang='en-us'.


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -