虚拟主机域名注册-常见问题网络编程问题 → CSS/HTML


css 文字强制换行/不换行
作者:
white-space: nowrap;  //强制不换行
text-overflow:ellipsis; //省略号显示
overflow:hidden; //超出隐藏
overflow: auto; //出现滚动条
当固定盒子的宽度时,中文会换行,但是英文和数字不换行,解决的方法如下:

1.  强制英文换行(二选一)

word-break: break-all;

word-wrap: break-word;

 

2. 强制中文换行 只对中文有作用

white-space: pre-wrap;

 

3. 强制不换行 中英文都有作用

white-space: nowrap;

 

4. 超出不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)中英文都有作用

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

 

5. 超出两行换行

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

width: 550rpx;

line-height: 40rpx;


来源:
阅读:1059
日期:2021-06-01

推荐朋友 】 【 评论 】  【 字体: 】 
上一篇:js url 编码
下一篇:php 排序 arsort krsort
  >> 相关文章
  没有相关文章。
发表评论


点  评: 字数0
用户名:  密码:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款