关于文字折行相关

598 阅读1分钟

一、英文和数字(非CJK文字)

英文单词和连续的数字,默认不会换行,除非遇到空格(U+0020)或者短横线连接符(U+002d)

image.png

image.png

image.png

如果一段文字中全是英文体系的文字,没有空格和短横线,会超出容器

image.png

二、让中文内容不换行,不影响英文

word-break:keep-all;

在宽度不是很富足的情况下,希望中文一行展示 image.png

三、中文标点可换行

希望中文标点符号不避头,不避尾。

line-break: anywhere;

image.png

四、连续破折号可换行

word-wrap: break-word;

image.png

image.png

五、 英文数字成为换行点

word-break:break-all;

image.png

六、空格不是换行点

white-space: nowrap;

image.png

七、英文标点强制换行

某些英文表单具有不可换行特性,例如 i’m 这个单词,其中的单引号具有特殊含义,默认是不能换行的。

overflow-wrap: anywhere;

image.png

八、工作中遇到的需求

券的有效期:中文数字排版,如果超出容器宽度,不能折行,按照宽度截断,不能在半个字处截断。

    overflow: hidden;
    height: .37rem;
    padding: 0 .02rem;
    box-sizing: border-box;
    line-break: anywhere;

附: www.zhangxinxu.com/wordpress/2…