pTags are auto-wrapped by default, so after setting the width, the effect can be achieved well. However, in a recent project, it was found that after loading data with ajax,pthe content inside the tag did not wrap, causing layout confusion. So I tried using the line-break style. Although it solved the problem, I did not discover the root cause. The essence is that the data I obtained at that time was a long string of numbers. The browser treats numbers and English words similarly and will not truncate them.

First give the various methods, then introduce each property in detail.

Forced no wrap:

p { white-space:nowrap; }

Auto wrap:

p { word-wrap:break-word; }

Force English word break:

p { word-break:break-all; }

Note:To force English words to break, you need to set the inline element as a block-level element.

Overflow shows ellipsis:

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

• white-space: The property sets how to handle whitespace inside an element.
• normal: Default. Whitespace is ignored by the browser.
• pre: Whitespace is preserved by the browser. It behaves similarly to the pre tag in HTML.
• nowrap: Text will not wrap; it continues on the same line until it encounters a br tag.
• pre-wrap: Preserves the sequence of whitespace characters, but wraps lines normally.
• pre-line: Collapses sequences of whitespace characters, but retains newline characters.
• inherit: Specifies that the value of the white-space property should be inherited from the parent element.

word-wrap: normal|break-word; 

• word-wrap: The property is used to indicate whether the browser is allowed to break words within a word. This is to prevent overflow when a string is too long to find its natural break point.
• normal: Break lines only at allowed break points (the browser keeps default handling).
• break-word: Break lines inside long words or URL addresses.

word-break: normal|break-all|keep-all;

• The word-break property is used to indicate how to break words within a word.
• normal: Uses the browser's default line break rules.
• break-all: Allows line breaks within words.
• keep-all: Can only break at half-width spaces or hyphens.