HTML5,CSS3中适合网页宽度根据词语自动换行的办法.

本文介绍了一种使用HTML5的<wbr>标签结合CSS3的white-space属性来实现自动换行的方法,尤其适用于混合语言文字的情况。

最近新学HTML5+CSS3+Jquery

项目中要用到根据词语自动换行。词语是英文,日文,掺杂的。

之前试过很多在css里面加 word-wrap / word-break / text-break / white-space标签的都不管用。

后来才找到一个办法。

HTML5新加了一个标签<wbr>就是预备换行的意思。详细意思可以参照W3School的html5教程。

我这里在每个词语的后面加了<wbr>之后还是会切断单词。后来又在包含词语的div的css里面加上white-space:nowrap 之后就一切OK了。

说了这么多,其实就是想说 css的white-space:nowrap 和 HTML的<wbr>放在一起用还挺好用的。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值