HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行

如下图：如果我在数据库中添加纯数字会这样超出Div容器！但如果我数据库中是文字中文汉字，就会自动折行。

代码：

<style>
.divClass{width:90px;border:1px solid red;margin-top:5px;
}
</style><div class="divClass">
我是一只小小小鸟
</div><div class="divClass">
1234567890123456789
</div><div class="divClass">
qwertyuiopasdfghj
</div>

1、在外围加上overflow:hidden隐藏掉超出部分即可。

<style>
.divClass{width:90px;border:1px solid red;margin-top:5px;overflow:hidden
}
</style>

2、如果非要断开长英文，可以在容器上加上属性：word-break:break-all; word-wrap:break-word;但这样有可能会造成部分英文单词换行断掉。不建议使用。

<style>
.divClass{width:90px;border:1px solid red;margin-top:5px;word-break:break-all; word-wrap:break-word;
}
</style>

3、word-wrap:break-word; 和 word-break:break-all 的区别

1)、word-break:break-all 例如div宽90px，它的内容就会到90px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

word-break;break-all 支持版本：IE5以上该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

2)、word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

word-wrap:break-word 支持版本：IE5.5以上内容将在边界内换行。如果需要，词内换行( word-break )也将发生。

参考地址：HTML 纯数字超出div容器，如果是文字或字母则可正常自动折行。

HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行相关推荐

html div文本自动换行,html中使用css控制div、p、td等自动换行、自动折行方法
自动换行.自动折行已经是个老问题,使用css控制很简单,不过如果稍不注意可能解决了一却忽略了二,所以需要个完整解决办法. 需要搞定html中所有标签,比如div.p.td等. 方法: 这个方法支持ie ...
CSS图片居中显示超出div容器高度度隐藏 css3 object-fit
CSS图片居中显示超出div容器高度度隐藏图片高度低于div容器高度上下不留白显示通过固定容器的宽高加上flex布局结合css3的属性object-fit实现 .el-image{width: ...
子元素自动填充父容器，并且会自动折行- dispaly: grid
很多时候,我们都需要这样的布局父元素宽度是resizable 子元素个数不确定子元素无论都少宽度都可以自动填充父元素当子元素过多时, 子元素可以自动折行每行的子元素宽度一置,都是左对齐如图: ...
c#随机数生成编号_使用C#生成随机密码（纯数字或字母）和随机卡号（数字与字母组合）...
今天,我们来看看怎么用C#生成一些随机数. 使用工具: Microsoft Visual Studio 2010 一. 用纯数字生成一个随机数做密码.代码如下: Random rd = new Ran ...
前端将后端返回的数字(英文字母)，转成对应的文字进行显示
前言类似于省市区,状态,性别之类的可以枚举出来的变量,一般情况下数据库中存储的是其对应的value值,像省市区联动的话,前端界面中显示的是省市区的名字,但是接口的入参一般是对应的code码:如果界面 ...
css连续的纯数字或字母强制换行
默认情况下,一个 DIV或者其他元素的文本,如果都是无文字分隔符,无空格,则不会自动换行,而如果我们想让它换行的话需要设置CSS属性: div{ white-space:normal; word-br ...
html 数字强制换行,利用CSS实现连续的纯数字或字母强制换行的方法
我们在网页样式中经常可以遇到这样的问题,没有做任何设置的时候,系统会默认整串数字或单词会在行位自动换行,不会截断数字和单词,这样的虽然很利于阅读,但是有时会造成页面不美观,我们需要在CSS里设置下强制 ...
微信小程序-如何解决view中放纯数字或字母不会自动换行？【亲测有效】
正则表达式匹配数字和字母混合或全数字或全字母
正则表达式匹配纯数字或字母 ^[0-9A-Za-z]{6,24}$ 正则表达式匹配数字和字母混合(限定位数6-24) ^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,2 ...
正则数字、字母、字符密码组合校验
--必须包含数字,字母,符号 3项组合的正则表达式 ^(?:(?=.*[0-9].*)(?=.*[A-Za-z].*)(?=.*[,\.#%'\+\*\-:;^_`].*))[,\.#%'\+\* ...

HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行

HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行相关推荐

最新文章

热门文章

HTML 纯数字或字母 超出div容器，如果是文字则可正常自动折行

HTML 纯数字或字母 超出div容器，如果是文字则可正常自动折行相关推荐

最新文章

热门文章

HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行

HTML 纯数字或字母超出div容器，如果是文字则可正常自动折行相关推荐