CSS: how to style to make text not wrap?

Tags: css

Problem :

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!


Solution :

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/

    CSS Howto..

    Find how an element's css has changed after jQuery “toggle” function has been used

    how to select image using css

    How can I get this chart to display next to data table in CSS?

    How do you change the appearance of a button in javascript?

    How to fix the Height for this area?

    How to change property of a specific CSS pseudo element?

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    How to reach 'this' element in the .css part in Jquery

    How php execute in file with extension .ctp in cakephp?

    How to fade gradient, image or texture as background?

    How to organise my web content?

    How to make a navbar stay in one line?

    CSS question - transparent underlined textbox - howto?

    show div and execute CSS animation in separate div on “li hover”

    How can you make an absolute positioning in css to adjust after the text modification?

    How does one create a div that extends to the bottom of the page?

    How to properly center a 100% width div in css

    How to set CSS width so that the element will have the exact window width?

    How to simulate nonstoparagraphing in HTML/CSS?

    Can User-Agent affect how CSS is rendered on a page?

    CSS - How to Style a Selected Radio Buttons Label?

    Showing Div via CSS selector within a UL

    How to build a mobile version of a non-mobile website? [closed]

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    how to fit the background image to the containing anchor element?

    How to adjust Capybara finders on a site using css-modules?

    How to create css shadow effect [duplicate]

    How to replicate the styling of html heading tags

    Selecting an adjacent's child… how?

    how to include css style to modify existing placeholder