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

一、相关信息

当输出

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

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

登录后复制

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

但当输出一个

登录后复制

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

二、问题描述

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

三、解决方案

使用如下的css定义

登录后复制

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