How to wrap text in a element in IE


Tags:
html,css,internet-explorer

Problem :

As <a> elements often contain long URLs with various tokens, this often breaks out of the outer container the link is in.

To prevent this, there are the CSS properties word-wrap, word-break and -ms-word-break(for earlier versions of IE). However, I couldn't get those working in IE (tried with IE11).

Here is the Fiddle Demo.

How can I make content of a <a> element automatically wrap inside of it's outer container in IE11?



Solution :

The link should have following styles to wrap properly:

a {
    word-wrap:wrap-word;
    word-break:break-all;
    display:inline-block; /* block would also work */
}

    CSS Howto..

    How to script CSS to achieve hide/appear effect based on hover

    How to go about making an image move up in the div on hover

    How do I refer to an image resource from CSS in grails?

    How to have multiple css print layouts on a single page application?

    How to use ASP.NET DropDownList in Bootstrap navbar

    how is Zurb's Foundation Menu button coded?

    Responsive portrait images, Hows & Dont's?

    How to create a pattern overlay on top of an image

    How to align body of the webpage to center?

    How to place two canvases adjacent to each other and on top of a third one

    How to fit CSS buttons into table cells?

    How do I align an icon right next to “Click here”?

    How to change CSS over selected element only using $(this)

    How to apply css to id generated dynamically?

    How to hide element that is currently mousedover and shown via :hover css pseudo class via jQuery

    How CSS property “opacity” renders in browsers (IE, Chrome, Firefox, Opera)?

    How to adjust the height of a Bootstrap accordion

    How to make the CSS “~” selector work in GWT Css Resource

    How to center smaller text with bigger css

    How to mimic Photoshop “Color Overlay” in CSS

    How to position html tag above an image and in the middle?

    How to align text differently inside a single inline element with CSS?

    How to create change image option on mousehover like in gmail account?

    How to preserve CSS using iTextSharp?

    How to create css based breadcrumb which supports IE8 [closed]

    How do I center a background image to its parent element?

    How to add randomness to the blink effect? [closed]

    CSS position: absolute - understanding how to center text inside a div box

    How can I hide elements on a HTML page until a user hovers over it using CSS?

    How to add shadow 'wings' to a centered content div