英文文本在p标签和div标签中的换行行为演示

默认情况下,p标签和div标签都会自动换行英文文本。white-space属性默认为normal,会合并空白符并允许自动换行。

div标签英文换行演示

This is a long text content in a div element. English text will automatically wrap at the container boundary. Words typically break at word boundaries, not within words.

p标签英文换行演示

This is a long text content in a p element. Similarly, due to the limited container width, the text will automatically wrap. The p element is also a block-level element with default margins.

空白符处理演示

This has many consecutive spaces that will be merged into single spaces.

This also has many consecutive spaces that will be merged into single spaces.

长单词处理

Supercalifragilisticexpialidocious is a very long English word that demonstrates how browsers handle extremely long words.

句子断行

English sentences with multiple words will break naturally at word boundaries: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

默认行为:


/* p标签和div标签的默认white-space值 */
p, div {
    white-space: normal; /* 隐式继承 */
}

/* 英文文本在单词边界处换行 */
/* 连续空格会被合并为单个空格 */