您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

word-break 文本打断

这个主要用来处理英文单词,在超出一行之后如何换到下一行的规则。

word-break 规定换行的处理。

一段英文段落,在其文本所在的元素边缘通常都会把整个单词另起一行,而这个可以打破这种排版方式,让这个段落的英文单词都是分开的,同汉字一样,在元素的边缘只是最后字母换行。

word-break@H__33@: normal|break-all|keep-all@H__33@;
.demo@H__33@{
    word-break@H__33@:break-all@H__33@;
@H__33@}

@H__33@<div class@H__33@=@H__33@"demo@H__33@"@H__33@>
    class.imooc.com class.imooc.com
@H__33@</div@H__33@>
@H__33@<div class@H__33@=@H__33@"demo demo-1@H__33@"@H__33@>
    class.imooc.com class.imooc.com
@H__33@</div@H__33@>
.demo@H__33@{
    background@H__33@: #ccc@H__33@;
    width@H__33@: px@H__33@;
    height@H__33@: px@H__33@;   
    margin-bottom@H__33@: px@H__33@;                     
@H__33@}
.demo-1@H__33@{
     word-break@H__33@:break-all@H__33@;      
@H__33@}

说明: 上图是没有使用换行的。下图使用了换行

@H__33@<div class@H__33@=@H__33@"demo-2@H__33@"@H__33@>
    class imooc-com class imooc-com classimooccom
@H__33@</div@H__33@>
.demo-2@H__33@{
    background@H__33@: #ccc@H__33@;
    width@H__33@: px@H__33@;
    height@H__33@: px@H__33@;   
    word-break@H__33@: keep-all@H__33@;                    
@H__33@}

说明: 如图第一行的结尾使用了连字符所以后面的英符换行了,第二行使用了空格所以后面的也换行了,而第三行没有空格或连字符因此没有换行。

这个用来处理当我们不想让 英文单词直接下一行,而是从中间断开,断开的地方换行例如我们使用连字符的时候。


联系我
置顶