Easy Tutorial
❮ Localstorage Spec Verilog2 Specify ❯

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;

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>
❮ Localstorage Spec Verilog2 Specify ❯