在CSS样式中，自动换行、无强制换行、强制换行和超过省略号显示的p标记默认自动换行，因此设置宽度很有效。 如下所示，将div宽度设定为固定值时，p的内容会自动换行到：
但是，最近的项目发现，加载数据后，p标记中的内容没有换行，布局混乱。 所以我试着使用了换行样式。 当时取得的数据是一系列的数字，浏览器处理数字和英语单词很接近，应该不会截断。
所以我尝试了数字和字母换行在p标签上的效果
果然没有按照给定的宽度换行。
在展示了各种解决方法之后，具体介绍了各自的属性。
无强制换行设定p标签无换行
p { white-space:nowrap； }自动换行p { word-wrap:break-word； }强制英文单词p { word-break:break-all； } *注意：要将英语单词设置为强制换行符，内嵌元素必须设置为块级元素。
省略号p { text-overflow:ellipsis； overflow :隐藏； }其中使用的属性介绍如下：
1.white-space white-space属性用于设置如何处理元素中的空白，请参见[使用[white-space，(https://developer.Mozilla.org/zh )
正常默认值。 在浏览器中将忽略空白。 pre空白将保留在浏览器中。 其行为类似于HTML的pre标签。 nowrap文本不会换行，文本会在同一行上继续，直到遇到br标签。 预写入会保留空白字符串，但换行符会正常进行。 pre-line合并空白字符串，但保留换行符。 inherit规定从父元素继承white-space属性的值。 2.word-wrap word-wrap属性用于指示浏览器是否允许在单词中分隔语句，并且可以引用word-wrap。 这是为了防止字符串太长而找不到自然分隔语句的句点时发生溢出。
normal:仅使用允许的连字符换行。 浏览器保持默认值。 break-word:在长单词或URL地址内部换行。 3.word-break word-break属性用于指示单词中连字的方法。写字板可供参考
normal :使用浏览器的默认换行符规则。 使用break-all:keep-all:只能用半角空格或连字符换行。 4.text-overflow text-overflow CSS属性确定如何向用户发送未显示的溢出信号。 可以被剪切、显示省略号’…’、U 2026 HORIZONTAL ELLIPSIS或显示自定义字符串。文本覆盖可作为参考
clip这个关键字的意思是“根据内容区域的极限截断文本”，所以有时会在文字的中途截断。 要使其在两个字符过渡中被截断，请使用空字符串值“”(totruncateatthetransitionbetweentwocharacters，theemptystringvalue ) must be used . 这是默认值。 关键字ellipsis表示“截断的文本由省略号()和U 2026 HORIZONTAL ELLIPSIS表示”。 省略号将添加到内容区域，从而减少显示的文本。 如果空间小到连撇号(撇号)都容纳不下，该撇号也会被截断。 string表示被截断的文本。 字符串的内容被添加到内容区域，因此显示的文本会变少。 如果空间小到连撇号都容纳不下，此字符串也会被截断。 看效果！ doctypehtmlhtmllang=' en ' headmetahttp-equiv=' content-type ' content=' text/html； charset=utf-8 '/metaname=' keywords ' content='关键字1，关键字2 ' metaname=' description ' content='站点说明内容' meywords ' 边距：50 px自动； padding:20px； 字体故障： ' microsoftyahei '； (/)无强制换行符(/.nowrap ) white-space:nowrap； 允许(/)单词内的句子中断，首先尝试移动到下一行。 看看下一行的宽度是否足够。 如果不够，则进行单词内的断句((/.breakword ) word-wrap:break-word； 对于(/)断句，单词中的断句(/.breakall ) word-break:break-all；而不是将长单词移到下一行； (/)超出部分用省略号(/. ellipsis (text-overflow : ellipsis )； overflow :隐藏； }/style/headbodydivclass=' word ' pclass=' nowrap ' word wrap : break word； absavhsafhuafdfbjhfvsalguvfaihuivfs/PP class=' break word ' word wrap : break-word； absavhsafhuafdfbjhfvsalguvfaihui/PP class=' break all ' word wrap : break-word； absavhsafhuafdfbjhfvsalguvfaihuivf/PP class=' normal ' word wrap : break word； absavhsafhuafdfbjhfvsalguvfaihuivfsa/PP class=' ellipsis ' word wrap : break word； absavhsafhuafdfbjhfvsalguvfaihuivfsab/p/div/body/html效果如下