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

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

一、背景

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

二、解决方式

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

  

解决办法是:

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

添加以后的效果是:

  

奏是这么任性~

相关文章
|
10天前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
36 0
|
10天前
|
前端开发
|
10天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
18 1
|
10天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
14 0
|
10天前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
23 0
|
10天前
|
前端开发 JavaScript
css 设置无背景色
css 设置无背景色
26 1
|
10天前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
23 0
|
10天前
|
前端开发
css怎样设置下滑线?
css怎样设置下滑线?
|
10天前
CSS3设置圆角化
CSS3设置圆角化
|
10天前
|
前端开发
CSS关于默认宽度
CSS关于默认宽度