button文字超长换行_网页里的超长文字超出边界?不用慌,超哪断哪
文字是网页展示内容的重要载体,最常见的文字有中文和英文。但浏览器处理同时含有中文和英文的句子时,会发现换行处理是不尽人意,要么长单词超出容器,要么单词断的太快,造成阅读的障碍。所以处理文字换行很有必要掌握!语法word-break:value(为以下取值);Normal,默认值,根据浏览器默认规则来拆分换行,每种浏览器可能都会有不同效果keep-all,凡是长单词,都不拆行,或者半角空格或连字符处
文字是网页展示内容的重要载体,最常见的文字有中文和英文。但浏览器处理同时含有中文和英文的句子时,会发现换行处理是不尽人意,要么长单词超出容器,要么单词断的太快,造成阅读的障碍。所以处理文字换行很有必要掌握!
语法
word-break:value(为以下取值);
Normal,默认值,根据浏览器默认规则来拆分换行,每种浏览器可能都会有不同效果
keep-all,凡是长单词,都不拆行,或者半角空格或连字符处才换行,简单点理解,就是长单词保持原样,有标点符号才换行,所以很容易造成溢出容器或者容器内有缺块。
break-all,所有单词碰到边界一律拆分换行,这也是常用处理中英文字段的手法,可以让容器内文字排列整齐。
break-word,最理想的处理手法,长单词只有超出才拆分换行,其他保持不变。可以说是keep-all和break-all的结合体。
案例
当word-break:keep-all,所有“单词”一律不拆分换行,极有可能会溢出容器,并且空格、标点符号也会触发换行。
当word-break:break-all,所有单词碰到边界一律拆分换行,就会造成英文单词断开。这也是目前国内常用的处理方法。
当word-break:break-word,长单词只有超出才拆分换行,其他保持不变。这种是上两种结合体,是最完美解决超长文字换行方案,单单记这个就足够了!
总结
更多推荐
所有评论(0)