程序小院
文章
位置： 首页 >文章
div布局文本溢出问题解决
- 前端
- 2022-12-01
- 803
- 0
div布局文本溢出问题解决
中文、英文、数字超出div外怎么解决1、纯中文：自动换行，一个汉字看做一个单词；2、纯英文或纯数字：看作一个单词，不换行；3、遇到英文空格或者换行符：会换行；4、遇到英文单词和英文空格：在空格处换行且不会断单词；css代码// 纯单词超过长度会截断换行，其他的单词不会word-wrap: break-word;// 单词也要换行，都要换行word-break: break-all;// 注意：浏览器默认属性值，以单词为单位；word-break: normal;word-wrap:normal;
1、单行
// 溢出隐藏overflow: hidden;// 强制在一行显示white-space: nowrap;// 显示省略号text-overflow: ellipsis;
2、多行
// 溢出隐藏overflow: hidden;// 显示省略号text-overflow: ellipsis;// 和-webkit-line-clamp结合使用// 将对象作为弹性伸缩盒子模型显示display: -webkit-box;// 用来限制在一个块元素显示的文本的行数，// 它需要组合其他的 WebKit 属性// 写什么数字表示最多显示几行。-webkit-line-clamp: 3;// 和-webkit-line-clamp结合使用// 设置伸缩盒对象的子元素的排列方式-webkit-box-orient: vertical;
转载：欢迎来到本站，转载请注明文章出处https://www.ormcc.com ，欢迎加入技术讨论群599606903
上一篇：chatGPT不限次数，插件安装
下一篇：CSS跳动的文字
随机推荐
飞越天空之城
球上进攻
神算子
贪吃蛇(二)
文章评论
- 1
- 0
- 1
- 打赏
喜欢请打赏
