CSS Word-wrap not working in Internet Explorer
CSS Word-wrap does not work in Internet Explorer
In this article, we will introduce the CSS Word-wrap property in Internet Explorer. This article addresses issues that don’t work properly in Internet Explorer (IE), and provides solutions and sample code.
Read more: CSS Tutorial
What is the CSS word-wrap property?
CSS The word-wrap property is a CSS property used to control whether text wraps within a container. When set to “normal,” text is not forced to break; when set to “break-word,” if a line of text is too long, it breaks between words.
In most modern browsers, such as Chrome, Firefox, and Edge, this property works correctly. However, in Internet Explorer (particularly versions earlier than IE11), the word-wrap property doesn’t always work as expected.
Word-wrap Issues in IE
In IE, the default value of the word-wrap property is “normal,” meaning that text will not be forced to break even if it’s too long. This can cause text to overflow its container, disrupting the page layout. This is especially noticeable when dealing with long URLs or file paths.
Solution: Use the CSS -ms-word-wrap Property
To work around the word-wrap property not working in IE, use the CSS -ms-word-wrap property. This property specifies whether text can break even without spaces or hyphens.
Below is a code example showing how to use the -ms-word-wrap property to achieve word-wrap in IE:
.example {
word-wrap: break-word; /* other modern browsers */
-ms-word-wrap: break-word; /* Internet Explorer */
}
In the above example, the container element with the class name “example” will use the word-wrap property, and the -ms-word-wrap property will also be used in IE.
Browser Compatibility Considerations
In addition to using the -ms-word-wrap property in IE, you also need to consider browser compatibility. The word-wrap property has been deprecated in most modern browsers. Its alternative is to use the overflow-wrap CSS property.
To ensure proper functionality in all modern browsers, use both the word-wrap and overflow-wrap properties, setting the same value for each:
.example {
word-wrap: break-word; /* other modern browsers */
-ms-word-wrap: break-word; /* Internet Explorer */
overflow-wrap: break-word; /* other modern browsers */
}
This ensures that text wrapping is handled correctly across browsers.
Sample Demo
Here’s a sample demo showing how to use the -ms-word-wrap attribute to resolve the issue when Word-wrap doesn’t work in IE:
<!DOCTYPE html>
<html>
<head>
<style>
.example {
width: 200px;
height: 100px;
border: 1px solid black;
word-wrap: break-word; /* other modern browsers */
-ms-word-wrap: break-word; /* Internet Explorer */
background-color: lightgray;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="example">
This is an example of how word-wrap doesn't work for very long text in IE. The text is too long to fit in the container unless the -ms-word-wrap property is used to force a line break.
</div>
<div class="example">
This is an example of word-wrap not working in IE. The text is too long to fit within the container without the use of the -ms-word-wrap property.
</div>
</body>
</html>
In the above example, the word-wrap property is applied using the class named “example” and the -ms-word-wrap property in IE. The text exceeds the width of the container, but thanks to the -ms-word-wrap property, the text breaks between words to fit within the container, maintaining the integrity of the page layout.
Summary
The CSS word-wrap property does not always work as expected in Internet Explorer, especially in versions earlier than IE11. To address this issue, use the CSS -ms-word-wrap property to control text wrapping in IE. Also, consider using the overflow-wrap property for compatibility across modern browsers. By providing sample code, we hope to help readers resolve the issue of the Word-wrap property not working in IE.