CSS设置超出指定宽度自动换行

简介: 一、背景   最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不会自动换行的问题,甚是无解,后经过努力,已经完美解决,下面来介绍解决方式。

一、背景

  最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不会自动换行的问题,甚是无解,后经过努力,已经完美解决,下面来介绍解决方式。

二、解决方式

  对于div,p等块级元素:正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行。然后对于纯字母和纯数字则不行.如下图:

  

解决办法是:

  使用word-wrap:break-word ;或者word-break:break-all;实现强制断行.

添加以后的效果是:

  

奏是这么任性~

相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
31 0
|
3月前
|
前端开发
|
5天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
16天前
CSS3设置圆角化
CSS3设置圆角化
|
1月前
|
前端开发
CSS关于默认宽度
CSS关于默认宽度
|
4月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
59 0
|
4月前
|
存储 前端开发
CSS3媒体查询实现不同宽度的下不同内容的展示
CSS3媒体查询实现不同宽度的下不同内容的展示
38 0
|
4月前
|
前端开发
CSS:设置字母间距、中文汉字间距
CSS:设置字母间距、中文汉字间距
|
5月前
|
前端开发
css文字字体间距设置
css文字字体间距设置
26 0
|
5月前
|
前端开发
通过CSS来设置页面滚动条
通过CSS来设置页面滚动条
32 0