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

一、背景

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

二、解决方式

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

解决办法是:

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

添加以后的效果是:

奏是这么任性~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏RESTART POiNTER

Web动态图片合成与分享——html2canvas方案实践

在web侧运营活动中,分享传播是重要的一环。普通的h5链接/结构化消息分享已经不能满足产品越来越大的脑洞。在很多场景下,我们需要将个性化内容(如帐号信息,头像,...

2.2K2
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

903
来自专栏阿凯的Excel

在Excel内实现跳跃!

今天和大家分享Excel中跳跃的神器。 想提跳跃,你会想到什么? 嗯 思路对了,我们实现的就是在Excel内实现跳棋。直接说需求吧! 我有好几千行的数据 ...

4023
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

1061
来自专栏BestSDK

原型设计神器——格式刷

就格式刷的易用性来说,不可否认的是,MS Office中word的格式刷给用户的使用习惯造成了深远而难以磨灭的影响。我们希望在使用格式刷时能看见真实的“刷子”,...

3846
来自专栏编程

网站代码该这样优化?

网站代码的优化也是网站优化中的一种优化措施,代码对于网站优化来说非常重要。虽然HTML代码是程序员应该精通的语言,但是对于HTML代码的优化应该是SEO专员应该...

1918
来自专栏Material Design组件

Human Interface Guidelines —— Action Sheets

3026
来自专栏九彩拼盘的叨叨叨

javascript 组件

2213
来自专栏Material Design组件

Human Interface Guidelines —— Popovers

37411
来自专栏HTML5学堂

移动端H5知识[系列] - 固定像素的实现方法

HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我...

5244

扫码关注云+社区

领取腾讯云代金券