html - Align wrapping text correctly using CSS -

html - Align wrapping text correctly using CSS -

this might totally silly question. here problem - have message box displayed in html (using bootstrap) show various user alerts. has info icon (using bootstrap glyphicons) , associated message. looks fine unless message long. sec line wrap under icon. want multiple lines wrap starting first line starts.

so wrong:

(i) wrong format of message

and right:

(i) right format want

my html/css simple:

<div class='alert alert-info'> <span class='glyphicon glyphicon-information'></span> &nbsp message comes here. </div>

but looked @ couple of sites including css-tricks , solutions seemed complicated. posting here see if there quick , easy way this.

you can play css positioning, need is, force entire element left using margin-left: 30px; , than, assign position: relative; container element create sure absolute positioned element doesn't flow out in wild.

now utilize position: absolute; glyph icon , utilize negative left value , positive top value set icon correct, please tweak these values according requirements, rest stays same

.alert { margin-left: 30px; width: 50px; position: relative; } .alert .glyphicon { position: absolute; left: -15px; top: 2px; }

demo

html css twitter-bootstrap alignment