CSS: how to style to make text not wrap?
I am doing a web application.
I am hoping to display an error message use the following html:
<div><i class="icon-remove-sign"></i> Error message (could take a few more lines)</div>
I would like to have the error message display in this "column", not wrapped under icon-remove-sign. If not using table-based design, how can I do it?
I tried different css rules, but the error text is either wrapped under icon-remove-sign or in the second line (beneath icon-remove-sign).
Thanks for help!
From your question it seems like you do not want to alter your HTML code, but I am unsure if that's possible.
However, if you add a div that wraps the error message you can achieve the results you want in a couple of ways.
For example using
display: inline-block; on both the icon and the error message: http://jsfiddle.net/jasongennaro/SK9ad/ (taken from http://stackoverflow.com/a/7005083/852765). Be aware that inline-block has limited support in IE7 and below.
Another example using
float: left on the icon and
margin-left on the error message: http://jsfiddle.net/bxHnM/