HTML中数字和字母不换行显示

HTML中数字和字母不换行显示的默认行为及如何通过CSS的word-wrapword-break属性进行调整。

在HTML中标签中的数字和字母默认是不换行的,如果要将他们换行,在CSS中添加"word-wrap: break-word;" 即可解决

语法:word-wrap: normal|break-word;

normal : 单词默认是不能断开的,长单词就会溢出
break-word : 会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句。

如果需要,词内换行使用(word-break)即可

语法:word-break:break-all;不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。

css 复制代码
  word-break:break-all;
  word-wrap:break-word

CSS 属性 word-break 指定了怎样在单词内断行。
这个属性原本属于微软扩展的一个非标准、无前缀的属性,叫做 word-wrap,后来在大多数浏览器中以相同的名称实现。目前它已被更名为 overflow-wrap,word-wrap 相当于其别称。

相关推荐
장숙혜8 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang11 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端14 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_17 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia17 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia26 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia33 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu33 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙1 小时前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX1 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue