黑松山资源网 Design By www.paidiu.com

一、浏览器默认处理文本换行

现在的浏览器对文本的换行处理还是比较合理的,当文字超过容器宽度时会自动换行,那么它是怎么自动换行的呢?即:当一行的末尾容纳不下下一个文字或单词时,就会自动换行,

英文单词不会被截断,相当于一段默认的css:

复制代码代码如下:
{
word-wrap: normal; /*浏览器对文本默认的自动换行处理*/
}

如图:浏览器自动换行文本

word-wrap与word-break 属性的概述及浏览器默认处理  word-wrap与word-break 属性的概述及浏览器默认处理

 

二、break-word属性值

当然在网页排版中也会遇到一些特殊情况,例如:某个单词(某品牌的英文名称)够长,而容器宽度较小以至于容纳不下,那么单词就会溢出容器,你可能就会想到下面一段css代码:

复制代码代码如下:
{
word-wrap: break-word; /*对溢出容器的单词进行截断,截断后的部分自动换行*/
}

如图:  使用break-word属性值之前                                                                    使用break-word属性值之后

word-wrap与word-break 属性的概述及浏览器默认处理                     word-wrap与word-break 属性的概述及浏览器默认处理

PS:我觉得这样处理并不合理,因为一个完整单词被拆分开了显示(就像汉字也不能拆分一样,特殊情况除外),

除了用上一行代码进行处理,我们是否可以考虑让容器宽度变长来展示文字,这样是否更合理些呢?

三、break-all属性值

还有另外一个关于文本断行的css属性值break-all:

复制代码代码如下:
{
word-break: break-all;
}

这个属性值不好解释,我们可以假设把整段文本看作一个单词,当这个单词(整段文本)超出容器宽度,则截断,截断后的部分自动换行,以此类推,如图:

word-wrap与word-break 属性的概述及浏览器默认处理

PS:浏览器对文本的自动换行处理已经够好了,使用该属性缺点同2,并不赞成使用。

黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。