CSS 让长字符串超过宽度时自动换行_html/css_WEB-ITnose

一、相关信息

当输出php的一个长字符串时（字符串是没有换行的）希望在当内容超过所设置的长度时字符串能够自动换行，否则该没有换行符号的字符串将超出所设置的宽度，无限拉伸页面

在纯html代码中，即使不做任何特殊申明，也会自动根据所设置的宽度进行自动换行，例如

<div style="width: 100px;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

如上代码会当内容宽度超出100px时会自动进行换行输出

但当输出一个php的长字符串时

<div style="width: 100px;"><?php echo $long_content; ?></div>

其中$long_content的内容宽度是远超过100px的，可以看到内容输出是不会自动换行的，会根据字符串的宽度无限拉伸页面，也即有多长就会拉伸多长，定义的宽度形如虚设，显然不是我们所期望的

二、问题描述

当输出长字符串时，内容不会自动换行，会无限拉伸页面

三、解决方案

使用如下的css定义

<div style="width: 100px; word-break: break-all;word-wrap: break-word;"><?php echo $long_content; ?></div>

1. word-break 属性规定自动换行的处理方法，值 break-all 表示允许在单词内换行。
2. word-wrap 属性允许长单词或 URL 地址换行到下一行，值break-word 表示在长单词或 URL 地址内部进行换行。