博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html文本自动换行
阅读量:6824 次
发布时间:2019-06-26

本文共 456 字,大约阅读时间需要 1 分钟。

hot3.png

word-wrap:

word-wrap的项有:

normal:默认,单词太长会超出容器宽度

break-word: 自动进行单词内断行,文本内容会在边界换行,长单词会断开换行。

把word-wrap配置成break-word后,有长单词的情况下,样式会好很多,不会出现超出容器宽度的问题,但是会发现浏览器在一个长单词在当前行放不下时,会先进行换行,后进行断词,这样会导致上面一行后面会空出一些,如下图:

101024_TwmJ_2299936.png

这里this is 后面会空出很多,要解决这个问题,需要用到css3里面的word-break属性

word-break:

normal:使用浏览器默认的换行规则

break-all:允许单词内换行

keep-all:只能在半角空格或连字符处换行

将word-break设置成break-all后,如下:

102200_7uF7_2299936.png

可以看到this is后面的空白被补上了,所以用word-break不会做单词过长整体单词换行的处理。

转载于:https://my.oschina.net/u/2299936/blog/531868

你可能感兴趣的文章
oracle中Window和Window Group
查看>>
SQL语句的执行过程
查看>>
hdu 1540 Tunnel Warfare
查看>>
装机必备工具
查看>>
Block
查看>>
查看.NET程序集编译类型命令corflags
查看>>
每天一个linux命令(16):witch命令
查看>>
使用Guava进行函数式编程
查看>>
「记录」安装Arch Linux的过程步骤
查看>>
SQL Sever数据库语法介绍及相关例子
查看>>
一步步学Qt,第五天-小小的ClippingDemo
查看>>
__FILE__,__LINE__,FUNCTION__实现代码跟踪调试(linux下c语言编程)(转)
查看>>
ASCII字符集
查看>>
如何用Axure快速制作APP交互原型
查看>>
微软正式开源Blazor,将.NET带回到浏览器
查看>>
Linux中普通用户配置sudo权限(带密或免密)
查看>>
poj1753-Flip Game BFS+位运算
查看>>
DeDe调用body文章内容
查看>>
Eclipse的Debug(一)
查看>>
配置虚拟主机(搭建网站)
查看>>