css中超过行宽自动换行怎么操作

在CSS中，当文本内容超过容器的宽度时，可以通过设置word-wrap或overflow-wrap属性来实现自动换行。

word-wrap属性用于指定是否允许单词内换行，它有两个可能的值：

normal：默认值，不允许单词内换行，只在单词之间换行。

break-word：允许单词内换行，当单词长度超过容器宽度时，会将单词拆分为多行显示。

示例代码如下：

.container {

width: 200px; /* 设置容器宽度 */

word-wrap: break-word; /* 允许单词内换行 */

overflow-wrap属性是word-wrap的一个别名，用于指定是否允许单词内换行。它有两个可能的值：

normal：默认值，不允许单词内换行，只在单词之间换行。

break-word：允许单词内换行，当单词长度超过容器宽度时，会将单词拆分为多行显示。

示例代码如下：

.container {

width: 200px; /* 设置容器宽度 */

overflow-wrap: break-word; /* 允许单词内换行 */

以上两种属性的效果是相同的，只是名称不同，可以根据个人喜好选择使用。

需要注意的是，以上属性只对块级元素有效，对于行内元素需要将其转换为块级元素才能生效，可以使用display: inline-block;或display: block;来实现。

希望以上内容能够帮助到你，如果还有其他问题，请随时提问。

千锋教育拥有多年IT培训服务经验，开设Java培训、web前端培训、大数据培训，python培训、软件测试培训等课程，采用全程面授高品质、高体验教学模式，拥有国内一体化教学管理及学员服务，想获取更多IT技术干货请关注千锋教育IT培训机构官网。