CSS Automatic Wrapping, Forced No Wrapping, Forced Line Breaking, and Ellipsis for Overflow
Category Programming Technology
The p tag automatically wraps text by default, so setting a width can achieve good results. However, in recent projects, I found that after loading data with AJAX, the content within p tags did not wrap, causing layout issues. I tried using wrapping styles, which solved the problem, but I didn't understand the root cause. The essence was that the data I fetched was a long string of numbers, and browsers likely treat numbers and English words similarly, not breaking them.
I'll present various methods first, then elaborate on each property.
Forced No Wrapping:
p { white-space: nowrap; }
Automatic Wrapping:
p { word-wrap: break-word; }
Forced Line Breaking for English Words:
p { word-break: break-all; }
Note: To force line breaking within English words, you need to set inline elements as block-level elements.
Ellipsis for Overflow:
p { text-overflow: ellipsis; overflow: hidden; }
white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
- white-space: Specifies how white space inside an element is handled.
- normal: Default. Sequences of white space are collapsed. New lines are collapsed.
- pre: Sequences of white space are preserved. Lines are only broken at newline characters in the source.
- nowrap: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
- pre-wrap: Sequences of white space are preserved. Lines are broken at newline characters, at
<br>
, and as necessary to fill line boxes. - pre-line: Sequences of white space are collapsed. Lines are broken at newline characters, at
<br>
, and as necessary to fill line boxes. inherit: Inherits the value from the parent element.
word-wrap: normal | break-word;
word-wrap: Allows long words to be able to be broken and wrap onto the next line.
- normal: Breaks lines according to normal line breaking rules.
break-word: Allows unbreakable words to be broken at arbitrary points.
word-break: normal | break-all | keep-all;
word-break: Specifies line breaking rules.
- normal: Uses default line breaking rules.
- break-all: Allows word breaking at arbitrary points.
- keep-all: Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<style>
.word { background: #E4FFE9; width: 250px; margin: 50px auto; padding: 20px; font-family: "microsoft yahei"; }
/* Forced No Wrapping */
.nowrap { white-space: nowrap; }
/* Allows word breaking within a word, trying to move to the next line first if space is insufficient */
.breakword { word-wrap: break-word; }
/* Breaks words at any character to prevent overflow */
.breakAll { word-break: break-all; }
/* Ellipsis for Overflow */
.ellipsis { text-overflow: ellipsis; overflow: hidden; }
</style>
</head>
<body>
<div class="word">
<p class="nowrap">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfs</p>
<p class="breakword">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihui</p>
<p class="breakAll">wordwrap:break-word;absavhsafhuafdfbjhfvsalguvfaihuivf</p>
<p class="normal">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsa</p>
<p class="ellipsis">wordwrap:breakword;absavhsafhuafdfbjhfvsalguvfaihuivfsab</p>
</div>
</body>
</html>