Home >Web Front-end >CSS Tutorial >How to Wrap Text in a Element Without Whitespace Across All Browsers?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-09 03:31:011024browse

How to Wrap Text in a <td> 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn