word-break 和 word-wrap 在各个浏览器中的效果

作者:袖梨 2022-06-25
提示:您可以先修改部分代码再运行
文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……文字啊文字,这里其实就是文字,想要更多的文字,那就开始复制……假如这里的文字内容是很长很长的话又没有标点符号的话那将会是怎么样的效果呢。结束!
test text txt word copy now! test texttexttexttexttext txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now! test text txt word copy now!
assssssssssssssssssssssssssssssssssssssssss333333333412341234adsfadfzxcvzcvdfgfnasdfadzvasdf234234adfvczxcvasdfasdf234adfzszxcvasdfasdf234234234azcvasdfadfasdf234adfasdf

word-break:

  • normal :  默认值。允许在词间换行
  • break-all :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
  • keep-all :  与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用 break-all

word-wrap:

  • normal :  默认值。允许内容顶开指定的容器边界
  • break-word :  内容将在边界内换行。如果需要,词内换行( word-break )也将发生
说明:

设置或检索当当前行超过指定容器的边界时是否断开转行。

此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 heightwidth 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block


清除断行样式
提示:您可以先修改部分代码再运行

相关文章

精彩推荐