css3 - Make div size exactly text width? -
this question has answer here:
- how make div not larger contents? 31 answers
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
Post a Comment