How to Wrap Text in a Element Without Whitespace Across All Browsers?

Element Without Whitespace Across All Browsers? " />

CSS: Wrap Text with No Whitespace in a

In this article, we will address an issue related to wrapping text without whitespace within a element. To achieve this, various CSS properties such as word-break and table-layout have been employed. However, the behavior differs across browsers, leaving Firefox users with un-wrapped text.

To resolve this discrepancy, the following CSS code has been devised:

.wrapword {
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  white-space: -webkit-pre-wrap; /* Chrome & Safari */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: pre-wrap; /* CSS3 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}

To use this code, apply the wrapword class to the desired element within a table, ensuring that table-layout is set to fixed. For instance:

<table>

This CSS solution has been tested and found to work consistently across Firefox 5.0, Internet Explorer 8.0, and Chrome 10.

The above is the detailed content of How to Wrap Text in a Element Without Whitespace Across All Browsers?. For more information, please follow other related articles on the PHP Chinese website!